Canvas路径

 

canvasContext.fill

对当前路径中的内容进行填充。默认为黑色

Tip: 如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充。

 

Tip: fill() 填充的的路径是从 beginPath() 开始计算，但是不会将 fillRect() 包含进去。

 

canvasContext.stroke

画出当前路径的边框

stroke() 描绘的的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去

 

canvasContext.beginPath

开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。

Tip: 在最开始的时候相当于调用了一次 beginPath()。

Tip: 同一个路径内的多次setFillStyle()、setStrokeStyle()、setLineWidth()等设置，以最后一次设置为准。

canvasContext.closePath

关闭一个路径

Tip: 关闭路径会连接起点和终点。

Tip: 如果关闭路径后没有调用 fill() 或者 stroke() 并开启了新的路径，那之前的路径将不会被渲染。

 

canvasContext.moveTo

把路径移动到画布中的指定点，不创建线条。

Tip: 用 stroke() 方法来画线条

canvasContext.lineTo

lineTo 方法增加一个新点，然后创建一条从上次指定点到目标点的线。

Tip: 用 stroke() 方法来画线条

canvasContext.arc

画一条弧线。

Tip: 创建一个圆可以用 arc() 方法指定其实弧度为0，终止弧度为 2 * Math.PI。

Tip: 用 stroke() 或者 fill() 方法来在 canvas 中画弧线。

canvasContext.quadraticCurveTo

创建二次贝塞尔曲线路径。

Tip: 曲线的起始点为路径中前一个点。

canvasContext.bezierCurveTo

创建三次方贝塞尔曲线路径。

Tip: 曲线的起始点为路径中前一个点。