画布 - 为旋转文本添加动画效果
Canvas - Animating rotated text
我需要对此动画执行什么操作才能使文本与背景图像一起动画化?
在这里摆弄
我在网上看到了几个不同的例子,但他们要么不像我那样旋转文本(这导致了问题(,要么他们没有解释解决方案背后的数学。
这很好 - 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;
我想你对使用"角度"var 的方式感到困惑:它实际上是保存当前旋转的 var,你也在绘制数量的 for 循环中使用它(角度+=angleAmount(...只是为了增加它。幸运的是,您为其添加了360°,因此它不会产生错误。
所以第一件事是停止在循环的文本绘制中增加这个变量,第二件事是将当前旋转角度添加到每个文本绘制中(使用度> rad 转换(:
context.rotate(( i * angleAmount + angle ) * (Math.PI / 180));
http://jsfiddle.net/gamealchemist/fwter56k/4/
(或稍作优化:http://jsfiddle.net/gamealchemist/fwter56k/5/(
相关文章:
- 使用JavaScript使按钮做出反应(添加动画)
- Adobe Edge:动画完成时添加onComplete处理程序
- 关于使用Animate.css向和项添加和删除动画类的问题
- 使用引导事件添加动画
- 在网页上添加退出动画
- 动画添加边框(先增大然后缩小)
- 如何向以下 jQuery 动画添加轻微的滑入/滑出效果
- 为假三维动画添加透视
- 如何向跟踪鼠标移动的动画添加惯性
- Javascript为动画添加延迟
- 如何将另一个矩阵雨代码动画添加到画布动画中
- 如何将动画添加到元素's的css属性
- 为jquery幻灯片动画添加不透明度效果
- 流星动画添加的项目
- 如何为页面中的所有动画添加通用回调
- 动画添加一个表行(JavaScript + jQuery)
- 手动将ng动画添加到元素中
- 将动画添加到简单的轮播
- 在较大的动画函数中为3个小动画添加循环函数
- CSS3关键帧动画点击(与addClass).如何重新启动CSS3动画添加css类