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绘制路径

最新文章

热门文章