canvas绘制图形总结

标签：canvas lineTo 路径 ctx 图形 beginPath 绘制

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) 绘制三角形

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 

 

标签：canvas,lineTo,路径,ctx,图形,beginPath,绘制
From： https://www.cnblogs.com/aleifighting/p/17986338