canvas arc() 方法绘制弧线、曲线、圆形，rect() 绘制矩形

目录

canvas arc() 方法

绘制圆形

填充圆形

canvas rect() 绘制矩形

---

注意：canvas 的 width 与 height 属性的值不能带单位，如 100px、100% 都是错误的，只能是纯数字，单位默认为 px。

canvas arc() 方法

1、arc() 方法创建弧/曲线（用于创建圆或部分圆），更多可参考《HTML 5 Canvas 绘制图形图像》

2、提示1：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

3、提示2：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。stroke 方法用于绘制路径，fill 方法用于填充路径。

4、JavaScript 语法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针(默认)，true = 逆时针。

绘制圆形

实现代码如下：

    
    
    
    
    
    
    



    
        浏览器不支持 Canvas
    


    
        浏览器不支持 Canvas
    

对 requestAnimationFrame 不熟悉的，可以查看《 requestAnimationFrame()方法实现帧动画》

填充圆形

区别在于：

strokeStyle 属性用于设置或返回画笔的颜色、渐变或模式

stroke()    绘制已定义的路径

fillStyle 属性用于设置或返回用于填充绘画的颜色、渐变或模式

fill()  属性用于填充当前绘图（路径）

    
    
    
    
    
    
    



    
        浏览器不支持 Canvas
    


    
        浏览器不支持 Canvas
    

canvas rect() 绘制矩形

rect() 方法用于创建矩形。

提示：请使用 stroke() 在画布上实际绘制矩形，或使用 fill() 方法在画布上实际地填充矩形。

JavaScript 语法：context.rect(x,y,width,height);

参数	描述
x	矩形左上角的 x 坐标
y	矩形左上角的 y 坐标
width	矩形的宽度，以像素计，所以不需要，也不能再带单位
height	矩形的高度，以像素计，所以不需要，也不能再带单位

实现代码如下：

    
    
    
    
    
    
    



    
        浏览器不支持 Canvas
    


    
        浏览器不支持 Canvas