Javascript 画布图像的问题

我现在正在做一个纺车。但我想将红色背景颜色更改为背景图像。有人知道我怎么解决这个问题吗。它必须是javascript，而不是jQuery。代码必须位于函数“drawRouletteWheel”中

您可以使用context.drawImage在画布上绘制图像：

var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； var cw=画布宽度； var ch=画布高度； var img=新图像； img.onload=启动； img.src=https://dl.dropboxusercontent.com/u/139992952/wheel.png; 功能启动{ ctx.drawImageimg，0,0； } 正文{背景色：象牙；} 画布{边框：1px纯红；}

---

我建议将这个问题降到最低限度，并提供一个更新JSFIDLE链接。没关系，你的谷歌fu只会越来越强大。有没有办法让背景图像和阵列一样旋转？我试过你的选择，但没有用。我想是因为我不太擅长Javascript。但有没有办法，把“红色”变成一个图片链接？我似乎不明白你想要什么…：-/。。。你能描述一下你需要什么吗。你是说你想用一个图像来填充这个圆，而不是用纯红色来填充它吗？是的，没错。我在描述中添加了一个链接，并举例说明我应该是什么样子。我想我明白了。你想在画布上画一个纺车的图像……你可以用context.drawImage来做。我再次编辑了我的答案来演示如何做。祝你的项目好运！谢谢你，我怎样才能把它写进我的代码里。我需要移除我绘制的画布吗？

function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
  var outsideRadius = 250;
  var textRadius = 125;
  var insideRadius = 0;
  surface = canvas.getContext("2d");
  surface.font = 'bold 25px sans-serif';
  for(var i = 0; i < 8; i++) {
    var angle = startAngle + i * arc;
    surface.fillStyle = 'red';
    surface.beginPath();
    surface.arc(250, 250, outsideRadius, angle, angle + arc, false);
    surface.arc(250, 250, insideRadius, angle + arc, angle, true);
    surface.fill();
    surface.save();   

    surface.fillStyle = "yellow";
    surface.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
    surface.rotate(angle + arc / 2 + Math.PI / 2);
    var text = restaraunts[i];
    surface.fillText(text, -surface.measureText(text).width / 2, 0);
    surface.restore();
  } 


}