画布中的自定义形状？答案

【问题标题】：custom shape in canvas?画布中的自定义形状？
【发布时间】：2012-05-13 20:41:00
【问题描述】：

有没有办法在 html5 画布中使用“贝塞尔曲线”或“二次曲线”来创建形状。或者有什么方法可以在画布中绘制多边形

【问题讨论】：

你有没有在画布上重新创建过这个形状？
不，我使用图像而不是绘图路径

【解决方案1】：

对于多边形，您可以使用以下内容（其中 ctx 是您的画布的 getContext('2d')）：

ctx.fillStyle=*hex code of the color you want it to be";
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
*add more points if needed using a lineTo(x,y) for each of your points*
ctx.closePath();
ctx.fill();

如果您想要一个描边多边形，请使用 ctx.strokeStyle 和 ctx.stroke() 而不是 ctx.fillStyle 和 ctx.fill()

【讨论】：

【解决方案2】：

当然可以，你至少有：

quadraticCurveTo
bezierCurveTo

看看这个示例代码：

http://www.html5canvastutorials.com/labs/html5-canvas-playing-card-suits/

【讨论】：