<style type="text/css">
    #mycanvas{
        background-color: orange;
        /*width: 600px;
        height: 400px;*/
    }
</style>
<!--
Canvas入门
1. 什么是Canvas？
canvas：画布的意思 英 ['kænvəs] 美 ['kænvəs]
简单理解： 就是用来作图的区域，实现画图必须使用js作图。

2. Canvas有什么作用？ 使用的场景有哪些？
2-1. 可视化数据，数据图形化的报表，比如： 百度echarts【重点】
2-2. 图形验证码【掌握】
2-3. 开发H5的小游戏
2-4. 模拟器产品
2-5. 特效动画

3. 如何快速使用Canvas？
3-1. 使用canvas标签
注意： 建议直接使用 width和height设置画布大小(默认300*150)，
不建议style样式设置画布大小，原因是通过js无法正确获取画布的大小
-->
<canvas id="mycanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
    var mycan=document.getElementById("mycanvas");
    console.log("画布大小",mycan.width,mycan.height);
</script>

01直线绘制

    <!--1. canvas标签，有宽度和高度-->
    <canvas id="mycanvas" width="1000" height="600"></canvas>
    
    <script type="text/javascript">
        //2. js中获取画布对象
        var canv=document.getElementById("mycanvas");
        
        //3. 上下文中设置绘图方式
        var ct=canv.getContext("2d");  //webgl就是3d效果
        
        //4. 开始作图...
        //常用的方法
        //4-1. 坐标原点： 在画布的左上角，坐标为（0,0），横向x轴，纵向y轴
        //4-2. 绘制的起点：ct.moveTo(x坐标，y坐标)
        //把起点设置在100,100
        ct.moveTo(100,100);
        
        //4-3. 绘制直线： ct.lineTo(x坐标，y坐标)
        //绘制斜线，终点坐标500,300
        ct.lineTo(100,400);
        
        //4-4. 设置线条的颜色： ct.strokeStyle="颜色"
        //设置线条的宽度：ct.lineWidth=数字
        ct.lineWidth=10;
        ct.strokeStyle="red";
        
        //4-5. 开始绘制线条 ct.stroke()
        ct.stroke();

02直线的进阶

<!--1. canvas标签，有宽度和高度-->
<canvas id="mycanvas" width="1000" height="600"></canvas>

<script type="text/javascript">
    //2. js中获取画布对象
    var canv=document.getElementById("mycanvas");
    
    //3. 上下文中设置绘图方式
    var ct=canv.getContext("2d");  //webgl就是3d效果
    
    //4. 绘制一个三角形： 3条边，3个线段
    //设置线宽和颜色
    ct.lineWidth=3;
    ct.strokeStyle="#000";
    
    
    
    //设置起点
    ct.moveTo(500,100);
    
    //开始绘制第1条边
    ct.lineTo(600,300);
    //开始绘制
    //ct.stroke();
    
    //开始绘制第2条边
    ct.lineTo(400,300);
    //ct.stroke();
    
    //开始绘制第2条边
    ct.lineTo(500,100);
    ct.stroke();
</script>

03三角形三边颜色不同

<!--1. canvas标签，有宽度和高度-->
<canvas id="mycanvas" width="1000" height="600"></canvas>

<script type="text/javascript">
    //2. js中获取画布对象
    var canv=document.getElementById("mycanvas");
    
    //3. 上下文中设置绘图方式
    var ct=canv.getContext("2d");  //webgl就是3d效果
    
    //4. 绘制一个三角形： 3条边，3个线段
    //设置线宽和颜色
    //开始绘制第1条边
    ct.lineWidth=3;
    //开始路径： ct.beginPath() 开启全新的路径
    ct.beginPath();
    //设置起点
    ct.moveTo(500,100);
    ct.strokeStyle="#f00";
    ct.lineTo(600,300);
    //开始绘制
    ct.stroke();
    
    //开始绘制第2条边
    ct.beginPath();
    ct.strokeStyle="#0f0";
    ct.moveTo(600,300);
    ct.lineTo(400,300);
    ct.stroke();
    
    //开始绘制第3条边
    ct.beginPath();
    ct.strokeStyle="#00f";
    ct.moveTo(400,300);
    ct.lineTo(500,100);
    ct.stroke();
</script>