Canvas 使用

Posted 2020-11-01 catyang

fillRect(x, y, width, height)绘制一个填充的矩形

strokeRect(x, y, width, height)绘制一个矩形的边框

clearRect(x, y, width, height)清除指定矩形区域，让清除部分完全透明。

 

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

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

stroke()通过线条来绘制图形轮廓。

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

 

绘制直线，需要用到的方法lineTo()。

lineTo(x, y)

该方法有两个参数：x以及y ，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，等等。。。开始点也可以通过moveTo()函数改变。

 

绘制圆弧或者圆，我们使用arc()方法。

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

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

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