如何创建一个带有弧形图案的画布圆圈

Question

我必须做一个像http://bramp.net/javascript/lunchwheel.html这样的轮盘赌轮，但是在颜色弧线上有数字我需要放置图像，我可以这样做吗？

Answer 1

如果我们使用路径和裁剪，我们可以轻松完成

Example Fiddle

我们创建一个带有直线和圆弧的路径，然后剪切该路径并将图像绘制到需要的位置。请记住保存并恢复画布。因为剪辑会将所有后续绘制和填充剪辑到您创建的路径。

//This is for only one section of the circle and needs to be repeated 
//for all slices.
var c = document.getElementById("c");
var img = document.createElement("img");

var ctx = c.getContext("2d");
img.src="your-image"
img.onload = function(){run()}
function run(){
    ctx.arc(200,200,150,0,2*Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(200,200);
    ctx.lineTo(350, 200);
    ctx.arc(200,200,150,0,Math.PI/2);
    ctx.lineTo(200, 200);
    ctx.stroke();
    ctx.save();
    ctx.clip();
    ctx.drawImage(img, 200,200);
    ctx.restore();
}