Canvas

01-体验Canvas绘图

HTML5的Canvas在js页面上进行绘画。

1. 准备画布

（默认白色，300*150，不建议在canvas样式里设置尺寸，在本身元素设置）

2. 准备工具

（js提供的工具，获取canvas元素）

3. 利用工具绘图。

	//1.获取元素
    var mycanvas=document.querySelector('canvas');
    //2.获取上下文，绘制工具箱
    var ctx=mycanvas.getContext("2d");
    //3.移动画笔到左上角的距离
    ctx.moveTo(100,100);
    //4.绘制直线(轨迹)
    ctx.lineTo(200,100);
    //5.描边
    ctx.stroke();

02-解释上下文和绘制路径

1. 不建议在canvas样式里设置尺寸？为什么？

答：会将原始canvas画布尺寸放大。导致里面的线条也会放大。
正确做法：

<canvas width="200px" height="200px ">

2. 为什么是2d？

答：2d即平面效果，3d暂时没有
一般，web gl绘制3d效果的网页技术（用于游戏中）

03-绘制平行线&线模糊问题

  var mycanvas=document.querySelector("canvas");
    var ctx=mycanvas.getContext("2d");
    //画平行线
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);

    ctx.moveTo(100,200);
    ctx.lineTo(300,200);

    //描边
    ctx.stroke();

关于线条的问题:

1. 默认的宽度是多少?1px
2. 默认的颜色是什么?黑色

（物理像素点，最小颗粒）
产生原因：对齐的点是线的中心位置，会把线分成两个0.5px,显示的不饱和会增加宽度。
解决方案：前后移动0.5px

04-绘制三条不同颜色宽度的平行线

1. 每次绘制之前，开启新路径。
2. tx.beginPath();解决样式覆盖问题

    ctx.beginPath();
    //黄色 30px
    ctx.moveTo(100,300);
    ctx.lineTo(200,300);
    ctx.strokeStyle="yellow";
    ctx.lineWidth=39;
    //描边
    ctx.stroke();
    //开启新路径可以解决样式覆盖问题

05-绘制填充三角形

1. ctx.fill(); 自动填充
2. ctx.closePath();自动闭合

//绘制一个三角形
    ctx.moveTo(100,100);
    ctx.lineTo(200,100);
    ctx.lineTo(200,200);
    //起始点和lineTo的点无法闭合
    ctx.closePath();
    ctx.lineTo(100,100);
    ctx.lineWidth=20;
    ctx.stroke();
    //填充
    ctx.fill();

06-绘制镂空正方形&非零环绕填充规则

1. 非零填充，看一块区域是否填充
2. 从这条区域拉一条线
3. 看这条直线相交的轨迹
4. 如果顺时针+1，逆时针-1
5. 总和为零不填充，非零填充

 ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.lineTo(300,300);
    ctx.lineTo(100,300);
    ctx.closePath();
    
    //a=100正方形
    ctx.moveTo(150,150);
    ctx.lineTo(150,250);
    ctx.lineTo(250,250);
    ctx.lineTo(250,150);
    ctx.closePath();
    ctx.fill();