javascript - HTML5 Canvas 扇贝形状

Question

我真的非常需要有关如何使用 Canvas 创建扇贝形状的帮助我试着玩弄云样本，但我真的很难创造出我想要的东西。

我只是想知道扇形矩形和圆形的代码。

这就是我想要的图像。

它的设计不必完全相同，但尽可能看起来像这样。

提前致谢..

Answer 1

你可以用虚线画出这样的形状，像这样(有点棘手)。

JavaScript:

const canvas = document.querySelector("#canvas");
canvas.width = canvas.height = 300;
const ctx = canvas.getContext("2d");
const rect = [50, 50, 200, 200];
//draw dotted line dash.
ctx.lineCap = "round";
ctx.setLineDash([0, 40]);
ctx.lineDashOffset = 20;
ctx.lineWidth = 42;
ctx.strokeStyle = "purple";
ctx.strokeRect(...rect);
//remove disuse range.
ctx.globalCompositeOperation = "destination-out";
ctx.lineWidth = 38;
ctx.strokeRect(...rect);
ctx.fillRect(...rect);

演示:
http://jsdo.it/defghi1977/iFR7