画布图像的问题

Problems with canvas image

本文关键字：问题 图像 布图像      更新时间：2023-09-26

我目前正在一个纺车上工作。但我想将红色背景颜色更改为背景图像http://www.dougtesting.net/winwheel.有人知道我该怎么解决吗。它必须是javascript而不是jQuery。代码必须在函数"drawRouletteWheel"中。

https://jsfiddle.net/9wo2krh8/

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

}

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

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/wheel.png";
function start(){
  ctx.drawImage(img,0,0);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=450 height=450></canvas>

相关文章：