帆布，动画文本旋转 [英] Canvas, animated text rotation
问题描述
我想有一个字的动画画布旋转，而画布上的另一个字不动。但不知何故，这两个停滞不前。我有什么改变？
[链接] http://jsfiddle.net/2dszD/8/
VAR帆布;
VAR CTX;
VAR canvasWidth;
VAR canvasHeight;
VAR间隔= 10;功能的init（）{ 帆布=的document.getElementById（画布上）;
CTX = canvas.getContext（'2D'）;
canvasWidth = canvas.width;
canvasHeight = canvas.height;
的setInterval（重绘，间隔）;
}在里面（）;
功能重绘（）{ ctx.clearRect（0，0，canvasWidth，canvasHeight）; ctx.translate（（200），（150））;
ctx.rotate（1 * Math.PI / 180）; ctx.fillStyle ='＃F00;
ctx.font ='40像素的san-serif';
ctx.textBaseline ='顶';
ctx.fillText（你好旋转，0，0）; ctx.rotate（ - （1 * Math.PI / 180））;
ctx.translate（ - （200） - ， - （150））; ctx.fillStyle ='＃F00;
ctx.font ='40像素的san-serif';
ctx.textBaseline ='顶';
ctx.fillText（你好静止，0，0）;
}
其实，你的文字是由一个微小的1.0度旋转即可。
1 * Math.PI / 180重新presents 1微小度旋转
所以，这将是一个非常突出的5度：
ctx.rotate（* 5.0 Math.PI / 180）;
几个编码故障：
您需要增加的旋转角度让你的文字动画效果确实
angleInDegrees + = 5;ctx.rotate（angleInDegrees * Math.PI / 180）;
的setInterval需要一个完整的函数作为参数，而不仅仅是一个函数的名称，如：
的setInterval（函数（）{重绘（）;}，间隔）;
和这里的处理翻译更简单的方法/旋转
相反，未翻译的和未旋转这样的：
ctx.translate（（200），（150））;
ctx.rotate（1 * Math.PI / 180）;//从这里得出的东西ctx.rotate（ - （1 * Math.PI / 180））;
ctx.translate（ - （200） - ， - （150））;
您可以改为context.save（）和context.restore（），这是更清洁，不需要非这样做的：
<$ C C> //保存画布背景下，包括其未翻译的和未设置旋转
ctx.save（）;ctx.translate（200150）;
ctx.rotate（angleInDegrees * Math.PI / 180）;//从这里得出的东西//恢复后（）画布是回到起始位置之前保存（）
ctx.restore（）;
下面是code和小提琴： http://jsfiddle.net/m1erickson/5XTcn/
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS媒体=所有的href =CSS / reset.css/＆GT; ＆LT;！ - 重置CSS - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;＆LT;风格＆GT;
身体{背景颜色：乳白色; }
帆布{边界：1px的纯红色;}
＆LT; /风格＆GT;＆LT;脚本＆GT;
$（函数（）{ VAR canvasWidth;
VAR canvasHeight;
VAR间隔= 350;
变种angleInDegrees = 0; 功能的init（）{
帆布=的document.getElementById（画布上）;
CTX = canvas.getContext（'2D'）;
canvasWidth = canvas.width;
canvasHeight = canvas.height; 的setInterval（函数（）{重绘（）;}，间隔）;
} 在里面（）;
功能重绘（）{ angleInDegrees + = 5; ctx.clearRect（0，0，canvasWidth，canvasHeight）; ctx.beginPath（）;
ctx.rect（200,150,5,5）;
ctx.fill（）; ctx.save（）; ctx.translate（200150）;
ctx.rotate（angleInDegrees * Math.PI / 180）; ctx.fillStyle ='＃F00;
ctx.font ='40像素的san-serif';
ctx.textBaseline ='顶';
ctx.fillText（你好旋转，0，0）; ctx.restore（）; ctx.fillStyle =＃F00;
ctx.font ='40像素的san-serif';
ctx.textBaseline ='顶';
ctx.fillText（你好静止，0，0）;
}}）; //结束$（函数（）{}）;
＆LT; / SCRIPT＆GT;＆LT; /头＆GT;＆LT;身体GT;
＆LT;帆布ID =画布WIDTH = 500 HEIGHT = 300＆GT;＆LT; /帆布＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
I want to have a animated canvas rotation of a word, while another word on the canvas does not move. But somehow both stand still. What do I have to change?
[link]http://jsfiddle.net/2dszD/8/
var canvas;
var ctx;
var canvasWidth;
var canvasHeight;
var interval = 10;
function init(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
canvasWidth = canvas.width;
canvasHeight = canvas.height;
setInterval(redraw, interval);
}
init();
function redraw() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.translate( (200 ), (150 ) );
ctx.rotate( 1*Math.PI/180 );
ctx.fillStyle = '#f00';
ctx.font = '40px san-serif';
ctx.textBaseline = 'top';
ctx.fillText("Hello rotated", 0, 0);
ctx.rotate(-( 1*Math.PI/180 ));
ctx.translate( -(200), -(150) );
ctx.fillStyle = '#f00';
ctx.font = '40px san-serif';
ctx.textBaseline = 'top';
ctx.fillText("Hello still", 0, 0);
}
Actually, your text is rotated by a tiny 1.0 degree.
1*Math.PI/180 represents 1 tiny degree of rotation
So this would be a more noticeable 5 degrees:
ctx.rotate( 5.0 * Math.PI/180 );
A few coding glitches:
You need to increment the rotation angle so your text actually animates
angleInDegrees+=5;
ctx.rotate( angleInDegrees * Math.PI/180 );
setInterval requires a full function as an argument, not just a function name, like this:
setInterval( function(){redraw();}, interval);
And here’s easier way to handle translate/rotate
Instead of un-translating and un-rotating like this:
ctx.translate( (200 ), (150 ) );
ctx.rotate( 1*Math.PI/180 );
// draw stuff here
ctx.rotate(-( 1*Math.PI/180 ));
ctx.translate( -(200), -(150) );
You can instead context.save() and context.restore() which is cleaner and doesn’t require un-doing:
// save the canvas context—including its un-translated and un-rotated setting
ctx.save();
ctx.translate(200,150);
ctx.rotate( angleInDegrees * Math.PI/180 );
// draw stuff here
// after restore() the canvas is back to its starting position before save()
ctx.restore();
Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/5XTcn/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvasWidth;
var canvasHeight;
var interval = 350;
var angleInDegrees=0;
function init(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
canvasWidth = canvas.width;
canvasHeight = canvas.height;
setInterval( function(){redraw();}, interval);
}
init();
function redraw() {
angleInDegrees+=5;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.beginPath();
ctx.rect(200,150,5,5);
ctx.fill();
ctx.save();
ctx.translate(200,150);
ctx.rotate( angleInDegrees * Math.PI/180 );
ctx.fillStyle = '#f00';
ctx.font = '40px san-serif';
ctx.textBaseline = 'top';
ctx.fillText("Hello rotated", 0, 0);
ctx.restore();
ctx.fillStyle = '#f00';
ctx.font = '40px san-serif';
ctx.textBaseline = 'top';
ctx.fillText("Hello still", 0, 0);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=500 height=300></canvas>
</body>
</html>
这篇关于帆布，动画文本旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
