Javascript 如何在HTML5画布中绘制和旋转图像以及文本

我在画布上绘制和旋转图像时遇到问题。基本上，我的方法是创建财富之轮，它允许基于数组形式的奖品进行定制。此数组中的数据根据索引数组成控制盘内的段

数据非常简单。它只是这样一个简单的JSON对象

var prizes = [
{product:"Axe FX", img: "https://mdn.mozillademos.org/files/5395/backdrop.png"},
{product:"Musicman JPX", img: "https://mdn.mozillademos.org/files/5395/backdrop.png"},
{product:"Ibanez JEM777V", img: "https://mdn.mozillademos.org/files/5395/backdrop.png"}
];

此数据用于在控制盘内创建线段。因此，我想把文本，这是目前正在像一个魅力为我工作

在绘制控制盘时，我将其分为两个主要功能。一个用于绘制控制盘，另一个用于绘制控制盘内部的线段

var drawPartial = function(key, lastAngle, angle) {
var value = prizes[key].product;

ctx.save();
ctx.beginPath();
ctx.lineWidth = 6;
ctx.fillStyle = segColors[key];
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, size, lastAngle, angle);
ctx.lineTo(centerX, centerY);
ctx.closePath();
ctx.stroke();
ctx.fill();

ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate((lastAngle+angle) / 2);
ctx.fillStyle = "#000";
ctx.fillText(value.substr(0,20), size / 2 + 20, 0);
ctx.restore();

ctx.restore();
}

var draw = function() {
var len = prizes.length;
var currentAngle = outCurrentAngle;
var lastAngle = currentAngle;

ctx.strokeStyle = '#000000';
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.font = "1.4em Arial";

for(var i = 1; i <= len; i++) {
    var angle = (Math.PI*2) * (i/len) + currentAngle;
    drawPartial(i-1, lastAngle, angle);
    lastAngle = angle;
}

ctx.beginPath();
ctx.lineWidth = 2;
ctx.fillStyle = "#fff";
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, size/7, 0, Math.PI*2);
ctx.closePath();
// ctx.stroke();
ctx.fill();

ctx.beginPath();
ctx.lineWidth = 10;
ctx.arc(centerX, centerY, size, 0, Math.PI*2);
ctx.closePath();
// ctx.stroke();
}

您可以看到，我基于奖品对象添加了image及其src，该对象应该在main draw（）函数调用的每次迭代中调用，但它从不在任何片段中渲染任何图像

我想要的是。在drawPartial（）的每次迭代中，我希望图像与文本一起放置在片段中，并根据角度旋转

---

请帮助解决…

问题

在

img.onload

功能中，您正在“双重转换”centerX和centerY

ctx.translate（centerX，centerY）

将画布的[0,0]原点移动到[centerX，centerY]

因此，当您

ctx.drawImage（img，centerX，centerY）

绘制图像时，您实际上是在双重移动

因此，您的图像实际上是在

[centerX*2，centerY*2]

处绘制的

另一个想法：预加载图像

最好预先加载所有图像。这样，如果图像无法加载，您可以在开始绘制控制盘之前采取修复操作

以下是如何预加载所有图像，以便在需要将其绘制到控制盘上时可以使用这些图像：

//传入的JSON
var prizesJSON='[{“产品”：“Axe FX”，“img”：https://mdn.mozillademos.org/files/5395/backdrop.png}，{“产品”：“Musicman JPX”，“img”：https://mdn.mozillademos.org/files/5395/backdrop.png}，{“产品”：“Ibanez JEM777V”，“img”：https://mdn.mozillademos.org/files/5395/backdrop.png"}]';
//JSON被转换为对象的JS数组
var=JSON.parse（prizesJSON）；
//预加载所有图像
var-imageurl=[]；
var-imgs=[]；
var-imagesOK=0；
//将奖品图像添加到图像预加载程序中
对于（var i=0；i问题

在
img.onload
功能中，您正在“双重转换”centerX和centerY

ctx.translate（centerX，centerY）
将画布的[0,0]原点移动到[centerX，centerY]

因此，当您
ctx.drawImage（img，centerX，centerY）
绘制图像时，您实际上是在双重移动

因此，您的图像实际上是在
[centerX*2，centerY*2]
处绘制的

另一个想法：预加载图像

最好预先加载所有图像。这样，如果图像无法加载，您可以在开始绘制控制盘之前采取修复措施

以下是如何预加载所有图像，以便在需要将其绘制到控制盘上时可以使用这些图像：


//传入的JSON
var prizesJSON='[{“产品”：“Axe FX”，“img”：https://mdn.mozillademos.org/files/5395/backdrop.png}，{“产品”：“Musicman JPX”，“img”：https://mdn.mozillademos.org/files/5395/backdrop.png}，{“产品”：“Ibanez JEM777V”，“img”：https://mdn.mozillademos.org/files/5395/backdrop.png"}]';
//JSON被转换为对象的JS数组
var=JSON.parse（prizesJSON）；
//预加载所有图像
var-imageurl=[]；
var-imgs=[]；
var-imagesOK=0；
//将奖品图像添加到图像预加载程序中
对于（var i=0；i
var drawPartial = function(key, lastAngle, angle) {
var value = prizes[key].product;

var img = new Image();
img.src = prizes[key].img;
img.onload = function() { 

    ctx.save();
    ctx.drawImage(img,centerX,centerY);

    ctx.save();
    ctx.translate(centerX,centerY);
    ctx.rotate((lastAngle+angle) / 2);
    ctx.drawImage(img,centerX,centerY);

    ctx.restore();
    ctx.restore();


}

ctx.save();
ctx.beginPath();
ctx.lineWidth = 6;
ctx.fillStyle = segColors[key];
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, size, lastAngle, angle);
ctx.lineTo(centerX, centerY);
ctx.closePath();
ctx.stroke();
ctx.fill();

ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate((lastAngle+angle) / 2);
ctx.fillStyle = "#000";
ctx.fillText(value.substr(0,20), size / 2 + 20, 0);
ctx.restore();

ctx.restore();
}