Canvas学习笔记——Canvas常用API方法

初始化Canvas画布

var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d'); // 之后的方法调用都是基于context

Canvas常用方法

1. context.beginPath() ：开启一条新的路径。
   不一定要与closePath()配对，可以不关闭旧路径直接开启新路径。

2. context.closePath()：关闭当前路径。
   如果使用此方法时图形不是闭合的，那么canvas会画一条线段使图形闭合。

3. context.moveTo(x, y)：x与y代表路径最开始的起点。

4. context.lineTo(x, y)：从上一个点画一条线到下一个点。

5. context.stroke()：将路径的线真正的画出来。

6. context.strokeStyle：设置线段的颜色。

7. context.lineWidth：设置线段的宽度。

8. context.fill()：填充颜色到路径画出的图形中。
   此方法相当于使用closePath()方法，然后再进行填充。

9. context.fillStyle： 设置填充的颜色。

10. context.arc(x, y, radius, startAngle, endAngle, anticlockwise) ：画一个圆形。
    x：圆心横坐标，
    y：圆心纵坐标，
    radius：半径长度，
    startAngle：圆弧的起点（单位为Math.PI），
    endAngle：圆弧的终点（单位为Math.PI），
    anticlockwise：是否逆时针，默认为false

11. context.clearRect(x, y, width, height)：清除画布

12. 获取canvas长度和宽度：context.canvas.width // context.canvas.height