使用canvas的方法绘制矩形圆形 - Kaiqisan

使用canvas的方法绘制矩形圆形

就是直接使用canvas方法绘制图形，可以免去自己一条一条绘制线段的麻烦。
——————————————————————————————————————————

绘制矩形

关键代码

rect(x, y, len, hei): 完成一个矩形的绘制，四个参数分别为：矩形左上角的x坐标，矩形左上角的y坐标，矩形的宽度(从x到x+len)，矩形的高度(从y到y+hei) ,可以配合ctx.stroke():实现一个矩形的绘制。

ctx.strokeRect(x, y, len, hei): 是上面的rect方法和stroke方法的整合，在绘制完成之后再描边处理，它属于填充方法stroke,所以要使用strokeStyle方法修改描边样式。

fillRect(x, y, len, hei): 完成一个矩形的绘制之后再进行填充(不负责描边),它属于填充方法fill,所以要使用fillStyle方法修改填充样式。

clearRect(x, y, len, hei): 完成矩形空间的内容清除，在清除之后，该区域变成透明区域(rgba(0, 0, 0, 0)),一般用于在更新画布内容的时候的画布刷新清屏。

参考源码

let canvas = document.getElementById('demo')
let ctx = canvas.getContext('2d')

// 画一个矩形
ctx.rect(100, 100, 50, 50)
ctx.strokeStyle = '#000000'
ctx.stroke()
// 描边矩形
ctx.beginPath()
ctx.strokeRect(200, 200, 50, 80)
// 填充矩形
ctx.beginPath()
ctx.fillRect(300, 300, 100, 100)
// 清除矩形（类似于画图板的橡皮擦）
ctx.beginPath()
ctx.clearRect(320, 320, 30, 30)

画出的图片如下：

把画布图片保存到本地时看到的图片

黑色矩形中间被扣掉的一块就是使用clearRect方法产生的
————————————————————————————————————————

绘制圆形和弧形

关键代码
arc(x,y,r,sAngle,eAngle,counterclockwise): 前六个参数都是绘制圆弧的必备的，它们分别是： 圆心x坐标 圆心y坐标 圆半径 起始角 结束角 是否顺时针绘制（默认顺时针）（第四第五个参数的角度以平面直角坐标系的为基准）

参考源码

ctx.arc(400, 300, 200, 0, 270 / 180 * Math.PI, false) // 注意：这里的角度是都采用弧度制
ctx.stroke()

绘制效果是这样的

利用圆弧，我们也可以很快速地绘制出一个扇形

let canvas = document.getElementById('demo')
let ctx = canvas.getContext('2d')
ctx.moveTo(400, 300)
ctx.arc(400, 300, 200, 0, 3 * Math.PI / 2, false)
ctx.closePath() // 合并路径
ctx.stroke()

绘制效果

以上就是canvas的简单的图形绘制。