canvas - 我如何创建一个带有弧线的画布圆圈，里面有图像

Question

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

Answer 1

如果我们使用路径和裁剪，我们可以很容易地做到这一点

示例小提琴

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

//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();
}