canvas绘制路径

Posted 2021-02-08 ye-hcj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas绘制路径相关的知识，希望对你有一定的参考价值。

canvas绘制路径

方法

beginPath()             创建一个新的路径
lineTo()                描绘路径
closePath()             沿着路径画直线，并且画点移动到路径开头
stroke()                绘制形状
fill()                  填充形状，会自动调用closePath方法

画一个实心六边形

const canvas = document.getElementById(‘canvas‘);
const ctx = canvas.getContext(‘2d‘);

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(130, 80);
ctx.lineTo(100, 110);
ctx.lineTo(50, 110);
ctx.lineTo(20, 80);
ctx.fill();

画一个空心六边形

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(130, 80);
ctx.lineTo(100, 110);
ctx.lineTo(50, 110);
ctx.lineTo(20, 80);
ctx.closePath();
ctx.stroke();

以上是关于canvas绘制路径的主要内容，如果未能解决你的问题，请参考以下文章

canvas绘制箭头路径效果

使用 SVG 路径数据在 Canvas 中绘制路径（SVG 路径到 Canvas 路径）