Javascript 画布将图像放置在形状中

我正在尝试创建一个类似旋转的轮子，在那里一个图像显示为奖品。我正在重用我在网上找到的一个项目，而且我对canvas还很陌生，所以我希望能得到一些帮助

这就是它的外观，这里的图像将显示在每个字段中，角度与车轮匹配。下面是生成它的代码：

            var outsideRadius = 210;
        var textRadius = 160;
        var insideRadius = 155;

        ctx = canvas.getContext("2d");
        ctx.clearRect(0,0,500,500);

        ctx.strokeStyle = "#943127";
        ctx.lineWidth = 4;

        for(var i = 0; i < 12; i++) {
            var angle = startAngle + i * arc;
            ctx.fillStyle = '#a9382d';
            ctx.beginPath();
            ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
            ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
            ctx.closePath();
            ctx.stroke();
            ctx.fill();
        }

var=210；
var textRadius=160；
var insideRadius=155；
ctx=canvas.getContext（“2d”）；
ctx.clearRect（0,0500）；
ctx.strokeStyle=“#943127”；
ctx.lineWidth=4；
对于（变量i=0；i<12；i++）{
var角度=星形缠结+i*弧；
ctx.fillStyle='#a9382d'；
ctx.beginPath（）；
ctx.弧（250，250，半径，角度，角度+弧，假）；
ctx.弧（250，250，内半径，角+弧，角，真）；
ctx.closePath（）；
ctx.stroke（）；
ctx.fill（）；
}

在上面的每个字段中，都应该显示一个数组中的奖品图像。我在绘制字段中的图像时遇到问题。我尝试过使用createPattern（），但运气不好

编辑：添加了JSFIDLE:

要在其中一个车轮楔块内剪裁图像：

见下图

计算指定楔体的4个顶点

使用

context.beginPath

开始一个新路径，并移动到点0

从点0到点1画一条线

从点1到点2画一条弧

从点2到点3画一条线

从点3画一条弧回到点0

关闭路径（不需要，只是格外小心）

调用

context.clip（）

以适当的角度绘制图像

见下图

找到楔块的中心点

使用

context.translate

将画布原点设置为该中心点

计算从车轮中心（下面的点#1）到楔块中心的角度

按计算出的角度旋转画布

绘制偏移图像宽度和高度一半的图像。这会使图像在视觉上居中于楔块内部

其他有用信息

• 使用

  context.clip

  设置剪辑时，撤消该剪辑的唯一方法是在

  context.save

  和

  context.restore

  之间包装剪辑。（或者调整画布的大小，但当您尝试绘制多个剪裁区域时，效果会适得其反，因为调整画布的大小时，所有内容都会被擦除）

• 要使图像居中，请找到图像居中的中心点，然后将图像偏移一半的宽度和高度：

  ctx.drawImage( img,-img.width/2, -img.height/2 );
  

• 计算圆圆周上的点：

  // given...
  var centerX=150;  // the circle's center
  var centerY=150;
  var radius=25;    // the circle's radius
  var angle=PI/2;   // the desired angle on the circle (angles are expressed in radians)
  
  var x = centerX + radius * Math.cos(angle);
  var y = centerY + radius * Math.sin(angle);
  

• 效率：path命令将自动从上一个命令的端点到新命令的起始点绘制一条线。因此，您可以跳过步骤#3和步骤#5，因为绘制圆弧时会自动绘制直线

示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
函数reOffset（）{
var BB=canvas.getBoundingClientRect（）；
offsetX=BB.left；
offsetY=BB.top；
}
var offsetX，offsetY；
reOffset（）；
onscroll=函数（e）{reOffset（）；}
var-PI=Math.PI；
var-cx=250；
var-cy=250；
var=210；
var textRadius=160；
var insideRadius=155；
var wedgecount=12；
var arc=数学PI*2/楔形计数；
var startAngle=-arc/2-PI/2；
var mm=新图像；
mm.空载=启动；
mm.src=https://dl.dropboxusercontent.com/u/139992952/multple/mm1.jpg';
var goldCar=新图像（）；
goldCar.onload=启动；
goldCar.srchttps://dl.dropboxusercontent.com/u/139992952/multple/carGold.png';
var redCar=新图像（）；
redCar.onload=启动；
redCar.src=https://dl.dropboxusercontent.com/u/139992952/multple/cars1.png';
var imgCount=2；
函数start（）{
如果（++imgcount不确定你的问题是什么。你能明确地说出来吗？还有，你试图让它工作的原因是什么，你在哪里遇到了问题？如果你为它创建了一个，这样我们就可以看到你试图做什么的整个代码，这会很有帮助。给你。我想在控制盘上的每个字段中显示一个图像。这个图像将有奖。你应该编写一个函数来抽取类似于
drawRouletteWheel（）；
的奖品。问题是使用clip（）正确放置图像；我无法使用clip（）；你的图像已作为副本关闭。你可以编辑内容并重新打开，而不是删除它并创建新的精确副本。
// given...
var centerX=150;  // the circle's center
var centerY=150;
var radius=25;    // the circle's radius
var angle=PI/2;   // the desired angle on the circle (angles are expressed in radians)

var x = centerX + radius * Math.cos(angle);
var y = centerY + radius * Math.sin(angle);