canvas

1、canvas基本概览

canvas：画布，h5新标签；

• canvas本身没有任何外观，只是在文档中创建了一个画板；
• ie9之前的版本不支持canvas；
• 画布的宽度和高度要用canvas的属性设置，不要直接在css里面定义；
• 画布的getContext()方法返回一个“绘制上下文”对象；
  绝大多数的画布绘制API来自这个对象；
  也就是说画布元素和他的上下文对象是两个完全不同的概念；
  调用该方法时，传递的参数是“2d”，也就是getContext('2d')，可以在画布上绘制二维图像；
  3d绘制就相对比较复杂了，具体实现还在规范中；

2、画布的尺寸和坐标

• 画布以左上角(0, 0)为坐标原点；
• 往右为X轴的坐标不断增大；
• 往下为Y轴的坐标不断增大；

3、绘制线段和填充多边形

1.绘制线段的API是上下文对象的方法；

​ 2.beginPath：开始定义一条新的路径；

​ 3.moveTo：开始定义一条新的子路径，该方法确定了线段的起点；

​ 4.lineTo：将上面定义的线段起点和指定的新的点连接起来；

​ 5.到这里只是规划好了思路，还没有在画布上画出任何图形；

​ 6.fill()：填充区域，此时只是填充，起点和终点并没有连接起来；

​ 7.closePath：会把起点和终点连接起来；

​ 8.stroke()：开始绘制图形，当前路径下的所有子路经都会绘制出来；

​ 9.如果要接着绘制新的路径，记得调用beginPath()方法；

4、绘制

4.1绘制线段

Ps：

• 画布以左上角(0, 0)为坐标原点；
• var huatu = canvas1.getContext(“2d”),加"2d"不然没有效果
• 如果不给设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置的宽高。

    <canvas id="canvas" width="600" height="600">
    </canvas>
    <script>
        var canvas1 = document.querySelector("#canvas")
        // 拿到canvas对象
        var huatu = canvas1.getContext("2d")//2d图
        // 通过canvas对象里面的方法拿到绘图工具
        huatu.moveTo(20, 20)
        // 线段开始的坐标
        huatu.lineTo(200, 200)
        // 线段结束的坐标
        huatu.stroke()
        // 开始绘制图形
    </script>

结果：

• lineTo 会把上一次的终点作为这一次的起点,没有上一次的终点那就没有这一次的起点

        huatu.moveTo(20, 20)
        // 线段开始的坐标
        huatu.lineTo(200, 200)
        huatu.lineTo(500, 100)
        // 线段结束的坐标

4.2绘制矩形

（1）rect()

​ 语法：context.rect(x,y,width,height);

​ 四个参数： 起点坐标x,y：左上角坐标； 宽度width：矩形的宽度； 高度height：矩形的高度；

4.2.1rect

  <canvas id="canvas" width="600" height="600">
    </canvas>
    <script>
        var canvas1 = document.querySelector("#canvas")
        // 拿到canvas对象
        var huatu = canvas1.getContext("2d")//2d图
        // 通过canvas对象里面的方法拿到绘图工具
        huatu.moveTo(20, 20)
        // 线段开始的坐标
        huatu.lineTo(200, 200)
        huatu.lineTo(500, 100)
        // 线段结束的坐标
        huatu.stroke()
        // 开始绘制图形
        huatu.rect(200, 200, 200, 200)
        huatu.stroke()
    </script>

结果：

4.2.2strokeRect

（2）strokeRect()方法可以直接绘制一个矩形；
​ 语法：context.strokeRect(x,y,width,height);

	<canvas id="box" width="600" height="600">
	</canvas>
	<script>
		var canvas = document.querySelector("#box")
		var ctx = canvas.getContext("2d") //Context 上下文
		ctx.fillRect(20, 20, 150, 100);//绘制一个已填充矩形

结果：

4.3曲线的绘制与填充

	<canvas id="box" width="600" height="600">
	</canvas>
	<script>
		var canvas = document.querySelector("#box")
		var ctx = canvas.getContext("2d") //Context 上下文
		let deg = Math.PI / 180
		ctx.arc(300, 300, 200, 0 * deg, 270 * deg, false)
		ctx.stroke()
	</script>

结果：
注意弧线的起点位置是0度，3点钟方向