我需要对此动画执行什么操作才能使文本与背景图像一起动画?
我在网上看到了几个不同的示例,但要么它们没有像我一样旋转文本(这导致了问题),要么它们没有解释解决方案背后的数学原理。
这相当不错 - http://tech.pro/tutorial/1008/creating-a-roulette-wheel-using-html5-canvas 但它并没有提供对任何数学函数的使用的深入了解。
我显然需要影响线路:
context.rotate(i * arc);
在写入文本的循环中,但我不确定所涉及的数学。
var cvs = document.getElementById("cvs");
var context = cvs.getContext("2d");
var height = 400,
width = 400,
spinning = false,
angle = 0,
awards = [100,200,300,400,500,600,700,800,900,1000,1100,1200],
segmentCount = 12,
angleAmount = 30,
arc = Math.PI / 6,
image = new Image();
image.src = 'http://placehold.it/400x400';
function draw() {
// clear
context.clearRect(0,0,width,height);
// rotate whole wheel here?
context.save();
context.translate(height/2, width/2);
context.rotate(angle * (Math.PI / 180));
context.drawImage(image,-width/2,-height/2);
context.restore();
// draw the prize amount text
for(var i = 0; i < segmentCount; i++){
context.save();
context.translate(height/2, width/2);
context.font = "bold 18px sans-serif";
context.textAlign = "end";
context.rotate(i * arc);
context.fillStyle = "#000000";
context.textBaseline = 'middle';
context.fillText(awards[i],145,0);
context.restore();
angle += angleAmount;
}
}
function update(){
draw();
angle += 5;
setTimeout(update,1000/30);
}
image.onload = update;
最佳答案
我认为您对使用“Angular ”变量的方式感到困惑:它实际上是保存当前旋转的变量,并且您也在绘制的for循环中使用它数量( Angular += Angular 量)...只是为了增加它。幸运的是,您添加了 360°,因此没有产生错误。
因此,第一件事是停止在文本绘制 for 循环中增加此变量,第二件事是将当前旋转 Angular 添加到每个文本绘制(使用度数 -> rad 转换):
context.rotate(( i * angleAmount + angle ) * (Math.PI / 180));
关于javascript - Canvas - 旋转文本动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27568267/