Question

我有一个用HTML5画布创建的轮盘赌轮，目前每个切片都是使用fillStyle()，beginPath()，stroke()，然后fill()方法生成的纯色。

我想使用在切片形状中适当裁剪的图像，但我不确定如何使用drawImage()实现此目的。

这是jsfiddle

感谢任何帮助或资源。

Answer 1

您可以将其用作剪贴蒙版，而不是填充颜色。对于每个弧，设置剪辑，绘制图像并重复。

像这样（未经测试）：

for (i = 0; i < s.members.length; i++) {
    angle = s.startAngle + i * s.arc;

    ctx.beginPath();

    ctx.arc(s.width / 2, s.height / 2, s.outsideRadius, angle, angle + s.arc, false);
    ctx.arc(s.width / 2, s.height / 2, s.insideRadius, angle + s.arc, angle, true);

    ctx.save();   /// store current clip-state
    ctx.clip();   /// set current arc as clipping mask

    ctx.drawImage(someImageArray[i], x, y, width, height);

    ctx.restore(); /// restore clip-state
    ctx.stroke();  /// stroke arc
}

您当然还需要相对于该部分正确放置图像，如果您想旋转图像，则此时需要旋转图像。

在这方面，我建议在离屏画布上创建此轮。这样你只需要将离屏画布画成旋转的主画布和你有什么（省去了计算每个角度的麻烦，性能会更好）。

帆布轮盘赌轮 - 使用背景图像作为每个切片

1 个答案: