canvas（二）

绘制线径

基本步骤：
第一步：获得上下文 =>canvasElem.getContext(‘2d’);

第二步：开始路径规划 =>ctx.beginPath()

第三步：移动起始点 =>ctx.moveTo(x, y)

第四步：绘制线(线条、矩形、圆形、图片…) =>ctx.lineTo(x, y)

第五步：闭合路径 =>ctx.closePath();

第六步：绘制描边 =>ctx.stroke();

案例：通过上面所学的方法绘制一个三角形。

<canvas id="mcanvas">你的浏览器不支持canvas，请升级浏览器</canvas>

 <script>
        
        var mcanvas  = document.getElementById("mcanvas");    //获得画布

        var mcontext = mcanvas.getContext("2d");    //获得上下文

        mcanvas.width = 900;     //重新设置标签的属性宽高
        mcanvas.height = 600;    //千万不要用 canvas.style.height

        mcanvas.style.border = "1px solid #000";    //设置canvas的边

        //绘制三角形
        mcontext.beginPath();        //开始路径
        mcontext.moveTo(100,100);    //三角形，左顶点
        mcontext.lineTo(300, 100);   //右顶点
        mcontext.lineTo(300, 300);   //底部的点
        mcontext.closePath();        //结束路径
        mcontext.stroke();           //描边路径

    </script>

案例：理解canvas基于状态的绘图

<canvas id="mcanvas">你的浏览器不支持canvas，请升级浏览器</canvas>

 <script>
        
        var mcanvas  = document.getElementById("mcanvas");    //获得画布

        var mcontext = mcanvas.getContext("2d");    //获得上下文
 

		mcanvas.width = 900;     //重新设置标签的属性宽高
        mcanvas.height = 600;    //千万不要用 canvas.style.height

        mcanvas.style.border = "1px solid #000";    //设置canvas的边

        mcontext.strokeStyle = "#ff0000";    //设置画笔的颜色
        mcontext.lineWidth = 2;                //设置画笔的粗细
        mcontext.fillStyle = "#00ff00";        //设置填充图形的颜色

        //绘制三角形
        mcontext.beginPath();        //开始路径
        mcontext.moveTo(100,100);    //三角形，左顶点
        mcontext.lineTo(300, 100);   //右顶点
        mcontext.lineTo(300, 300);   //底部的点
        mcontext.closePath();        //结束路径
           mcontext.stroke();           //描边路径       
        //mcontext.fill();             //填充图形

        //绘制矩形
        mcontext.beginPath();    //开启了一个新状态（新线径），
                              //新状态可以继承之前状态的样式，
                              //但是当前状态设置的所有样式只能用于当前状态。
       
 		//mcontext.strokeStyle = "#00ff00";//为当前状态设置的样式
        mcontext.moveTo(500,100);    //起始点
        mcontext.lineTo(800,100);    //上边
        mcontext.lineTo(800,300);    //右边
        mcontext.lineTo(500,300);    //下边
        mcontext.closePath();
        mcontext.stroke();
    </script>