canvas绘制图形

1. canvas默认的width:300px、height:150px。

也可以通过css来设置width和height，但是设置的width和height需要和初始比例一致，否则会出现扭曲。故不建议使用css来给canvas设置width和height

2. canvas只支持一种原生的图形绘制：矩形。

2.1 canvas绘制矩形的3种方式：

1. fillRect(x, y, width, height) //绘制一个填充的矩形
2. strokeRect(x, y, width, height) //绘制一个矩形的边框
3. clearRect(x, y, width, height) //清除指定的矩形区域

3. 图形的基本元素是路径。

路径是通过不同颜色和宽度的线段或者曲线相连形成的不同状态的点的集合。

3.1 绘制路径步骤：

1. 创建路径起始点：beginPath()
2. 调用绘制方法来绘制路径 moveTo(x, y)
3. 将路径封闭（一个路径甚至一个子路径，都是封闭的） closePath()
4. 通过描边 或者填充路径 来渲染图形
   stroke() 通过线条来绘制图形轮廓
   fill() 通过填充路径的区域生成实心的图形

3.2 绘制圆弧的两种方式：

1. arc(x, y, r, startAngle, endAngle, anticlockwise);
   圆心坐标: (x, y); 半径: r; 从startAngle弧度开始到endAngle弧度结束; anticlockwise: true(逆时针)，false(顺时针，默认)
2. arcTo(x1, y1, x2, y2, r);
   根据给定的起始点、控制点和半径画一段圆弧，最后再以直线连接控制点2和起始点
   控制点1: (x1, y1); 控制点2: (x2, y2); 半径: r
   也就是说绘制的弧形由两条切线（起始点到控制点1的直线，控制点1到控制点2的直线）和圆弧半径确定

3.3 绘制贝塞尔曲线：

1. 绘制二次贝塞尔曲线：
   quadraticCurveTo(cp1x, cp1y, x, y);
   控制点坐标(cp1x, cp1y); 结束点坐标(x, y)
2. 绘制三次贝塞尔曲线：
   bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
   控制点1坐标(cpx1, cpy1); 控制点2坐标(cpx2, cpy2); 结束点坐标(x, y)

4. 参考

http://www.runoob.com/w3cnote/html5-canvas-intro.html

练习代码如下：

<canvas id="canvas" width="1000" height="800"></canvas>

<script type="text/javascript">
	function draw() {
   
        let canvas = document.getElementById('canvas');

        /*获得画笔上下文*/
        var ctx = canvas.getContext('2d');

        /*设置填充颜色*/
        ctx.fillStyle = "rgb(200, 0, 0)";
        /*回执填充的矩形，起点坐标：(10, 10), 长：55,宽：50*/
        ctx.fillRect(10, 10, 55, 50);

        ctx.fillStyle = "rgb(0, 0, 200, 0.5)";
        ctx.fillRect(