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

Problem

在你的 img.onload 功能中，你是_x438383_你的中心X和中心 .

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

因此，当你绘制你的图像时，你真的是双重移动 .

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

A additional thought: Preload your images

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

以下是如何预加载所有图像，以便在需要将它们绘制到轮子上时可用：

// your incoming JSON

var prizesJSON='[{"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"}]';

// the JSON converted to a JS array of objects

var prizes=JSON.parse(prizesJSON);

// preload all images

var imageURLs=[];

var imgs=[];

var imagesOK=0;

// add prize images into the image preloader

for(var i=0;i

imageURLs.push(prizes[i].img);

}

startLoadingAllImages(imagesAreNowLoaded);

//

function startLoadingAllImages(callback){

for (var i=0; i

var img = new Image();

imgs.push(img);

img.onload = function(){

imagesOK++;

if (imagesOK>=imageURLs.length ) {

callback();

}

};

img.οnerrοr=function(){alert("image load failed");}

img.src = imageURLs[i];

}

}

//

function imagesAreNowLoaded(){

// add the img objects to your prizes array objects

for(var i=0;i

prizes[i].imageObject=imgs[i];

// just testing (add the img to the DOM)

document.body.appendChild(imgs[i]);

}

// All images are fully loaded

// So draw your wheel now!

}

body{ background-color: ivory; }

Testing: (1) Preload all images, (2) Add imgs to DOM

I had this laying around...

我看到你已经有代码来绘制你的Wheel了，但是我的代码存档中有这个代码所以我在这里提供它以防万一它对你有用 .

以下是如何使用包含奖品图像和文字的每个刀片绘制“财富之轮”的示例 . 使用的技术包括：

context.translate 将旋转点设置为车轮中心 .

context.rotate 将每个刀片旋转到所需的角度 .

context.textAlign ＆ context.textBaseline 绘制居中文字 .

context.globalAlpha 减轻每个刀片的颜色，使黑色文字具有良好的对比度 .

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var cw=canvas.width;

var ch=canvas.height;

var PI=Math.PI;

var PI2=PI*2;

var bladeCount=10;

var sweep=PI2/bladeCount;

var cx=cw/2;

var cy=ch/2;

var radius=130;

var img=new Image();

img.οnlοad=start;

img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png";

function start(){

for(var i=0;i

drawBlade(img,'House'+i,cx,cy,radius,sweep*i,sweep);

}

}

function drawBlade(img,text,cx,cy,radius,angle,arcsweep){

// save the context state

ctx.save();

// rotate the canvas to this blade's angle

ctx.translate(cx,cy);

ctx.rotate(angle);

// draw the blade wedge

ctx.lineWidth=1.5;

ctx.beginPath();

ctx.moveTo(0,0);

ctx.arc(0,0,radius,0,arcsweep);

ctx.closePath();

ctx.stroke();

// fill the blade, but keep the color light

// so the black text has good contrast

ctx.fillStyle='white';

ctx.fill();

ctx.fillStyle=randomColor();

ctx.globalAlpha=0.30;

ctx.fill();

ctx.globalAlpha=1.00;

// draw the text

ctx.rotate(PI/2+sweep/2);

ctx.textAlign='center';

ctx.textBaseline='middle';

ctx.fillStyle='black';

ctx.fillText(text,0,-radius+50);

// draw the img

// (resize to 32x32 so be sure orig img is square)

ctx.drawImage(img,-16,-radius+10,32,32);

// restore the context to its original state

ctx.restore();

}

function randomColor(){

return('#'+Math.floor(Math.random()*16777215).toString(16));

}

body{ background-color: ivory; }

#canvas{border:1px solid red; margin:0 auto; }