参考

使用canvas来绘制图形

知识点

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。

使用路径绘制图形的步骤

1. 创建图形起点；
2. 使用画图命令绘制路径；
3. 封闭路径；
4. 通过描边或填充路径区域来渲染图形；

方法

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径

beginPath()

闭合路径之后图形绘制命令又重新指向到上下文中

closePath()

通过线条来绘制图形轮廓

stroke()

通过填充路径的内容区域生成实心的图形

fill()

注意：

当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论实际上是什么。出于这个原因，几乎总是要在设置路径之后专门指定图形的起始位置。
当调用fill()函数时，所有没有闭合的形状都会自动闭合，所以不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

案例

<canvas id="canvas" width="400px" height="400px"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var oContext = canvas.getContext('2d');
            oContext.beginPath();
            oContext.moveTo(50, 50);
            oContext.lineTo(150, 50);
            oContext.lineTo(150, 100);
            oContext.lineTo(100, 100);
            oContext.fill();
        }
    </script>

结果

移动笔触

moveTo(x, y): 将笔触移动到指定的坐标x以及y上。
当canvas初始化或者beginPath()调用后，通常会使用moveTo()函数设置起点,也能够使用moveTo()绘制一些不连续的路径;

线条

绘制一条直线，从当前位置到指定x以及y位置的直线；

lineTo(x,y)

参数说明:
x： 结束点的横坐标
y ：结束点的纵坐标

圆弧

绘制方法arc || arcTo

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成：

arc(x, y, radius, startAngle, endAngle, anticlockwise)

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点:

arcTo(x1, y1, x2, y2, radius)

参数说明

x,y： 圆心坐标；
startAngle： 开始的弧度；
endAngle： 结束的弧度；
radius：半径；
anticlockwise： 规定方向，取值布尔值（true，false）, true表示逆时针，false表示顺时针；

注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees；

案例：

<canvas id="canvas" width="400px" height="400px"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var oContext = canvas.getContext('2d');
            oContext.beginPath();
            oContext.arc(200, 200, 40, 0, Math.PI + (Math.PI * 180) / 2, true);
            oContext.fill();
        }
    </script>

结果

二阶贝塞尔&&三阶贝塞尔曲线

绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
quadraticCurveTo(cp1x, cp1y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

<canvas id="canvas" width="400px" height="400px"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var oContext = canvas.getContext('2d');
            oContext.beginPath();
            oContext.moveTo(200, 300);
            oContext.quadraticCurveTo(250, 250, 300, 300);
            oContext.quadraticCurveTo(300, 300, 350, 350);
            oContext.stroke()
            oContext.closePath();
            oContext.fill();

            oContext.beginPath();
            oContext.moveTo(75, 40);
            oContext.bezierCurveTo(75, 37, 70, 25, 50, 25);
            oContext.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
            oContext.bezierCurveTo(20, 80, 40, 102, 75, 120);
            oContext.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
            oContext.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
            oContext.bezierCurveTo(85, 25, 75, 37, 75, 40);
            oContext.fill();
        }
    </script>

结果