canvas绘制图形总结

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

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

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

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

 

绘制矩形

  ctx.save()
  ctx.beginPath()

  ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`

  ctx.fillRect(x,y,w,h)

  ctx.restore()

清除区域

  ctx.clearRect(x, y, w, h)

绘制三角形

?

1 2 3 4 5

ctx.beginPath(); ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill();

绘制直线

 

  ctx.moveTo(x1, y1) //将笔放置开始的位置

  ctx.lineTo(x2, y2) //绘制到哪

图形的裁剪

 ctx.rect(x, y, w, h）// 绘制矩形路径

  ctx.clip()//进行裁剪

  ctx.clearRect(x, y, w, h)

详细的总结可参考  https://blog.csdn.net/weixin_43294560/article/details/119008224

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes