画布---canvas

一.画布

HTML5画布：canvas：拥有默认的宽高，其宽高并不能用样式设置，只能在标签中使用和设置
<canvas class=“mycanvas”，id=“mycanvas”>
可通过js在页面中绘制各种的图像

 var ctx=document.querySelector("#myCanvas").getContext("2d");
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.lineTo(400,100);
        ctx.lineTo(400,300);
        ctx.lineTo(100,100)
        ctx.closePath();

二.步骤

1.获取画布—var mycanvas=document.getelementbyId(“mycanvas”);
2.设置上下文对象，2d，3d，即获取上下文对象----变量.getContext(“2d”);
3.绘制起点，，变量.moveTo(100,100)—x轴，y轴
4.绘制线，，变量.lineTo(100,300)-----x轴，y轴
5.描边，，变量.stroke()
----描边的颜色的设置：变量.strokeStyle=“red”;
----描边的默认颜色：黑色;
----描边默认宽度：1px;
----但在页面中会出现2px的宽度,原因：当线条拉开时，页面会将线条分成上下两部分，每一部分均为0.5px;
但页面中并不会解析0.5px,故将此解析为1px,则会出现2px的线条；
解决方案:将线条向上移动0.5px,或向下移动0.5px,改变moveTo，lineTo，即不能卡在一个整数位置

三.属性

6.开启路径：beginPath();-----相当于开始一条曲线
              闭合路径：closePath();-----相当于闭合曲线，让最后的一个终点与起点闭合;
              ----作用：相当于提笔画线的过程，独立阶段；即每画一条线则开启和闭合路径
            7.设置线的宽度：变量.lineWidth=20;
            8.设置线的末端：变量.lineCap="butt";---正直;
                            变量.lineCap="round";---圆形;
                            变量.lineCap="square";---正方形;

            9. 连续的画线：
                    ----moveTo(100,100)
                        lineTo(400,100)
                        lineTo(250,400)
                        ---皆是以上一个终点lineTo为起点，下一个lineTo为终点

            10.填充颜色: ctx.fillStyle="red";
                        ctx.fill();----默认是黑色
                        --两者一起用，但必须在描边完成之前

            11.非零环绕-填充颜色：
                方法：1.在区域中添加一条射线，
                      2.观察射线与每个区域的交点，交点处为逆时针，则为"-1",顺时针则为"+1",两者之和为“0”，则填充颜色为区域相交处
                        ，否则填充颜色在交接处外
    注意：即设置画笔，闭合路径的区域样式时，必须在描边完成之前！！！！！！！！


            12.设置虚线：setLineDash();
                    ctx.setLineDash([5,10,20]);-----
                    ----开始--片段5，空格10，片段20；--空格5，片段10，空格20----以前两个阶段为一个循环
                    ----getLineDash()---获取虚线的集合，ctx.getLineDash()----返回number
                    ----lineDashOffset;----ctx.lineDashOffset=-20;---向左偏移20px;
            
            13.绘制矩形：rect(x,y,width,height)----x坐标，y坐标，宽度，高度-----并没有描边
                            ----ctx.stroke();//绘制描边的矩形
                        
                        ctx.strokeRect(x,y,width,height)-----//绘制描边的矩形
                        ctx.fillRect(x.y,width,height)------//绘制填充的矩形
                            ---ctx.fill;
                        ctx.clearRect(x,y, width,height)-----//橡皮擦的效果