Kap*_*ers 34 javascript html5 animation canvas
我试图弄清楚如何在html 5画布上旋转单个对象.
例如:http://screencast.com/t/NTQ5M2E3Mzct - 我希望这些卡中的每一张都以不同的程度旋转.
到目前为止,我所看到的只是文章和示例,演示了旋转整个画布的方法.现在,我猜我必须旋转画布,绘制图像,然后在绘制第二个图像之前将画布旋转回原始位置.如果是这样的话,请告诉我!我只是觉得还有另一种方式.
任何人都有任何想法？
提前致谢!
小智 61
我在最近的一个项目中遇到了同样的问题(我在那里踢了外星人).我只是使用了这个简单的函数来做同样的事情,并且可以像ctx.rotate一样使用,但可以传递一个角度.对我来说很好.
function drawImageRot(img,x,y,width,height,deg){
// Store the current context state (i.e. rotation, translation etc..)
ctx.save()
//Convert degrees to radian
var rad = deg * Math.PI / 180;
//Set the origin to the center of the image
ctx.translate(x + width / 2, y + height / 2);
//Rotate the canvas around the origin
ctx.rotate(rad);
//draw the image
ctx.drawImage(img,width / 2 * (-1),height / 2 * (-1),width,height);
// Restore canvas state as saved from above
ctx.restore();
}
是的,我的第一个答案!
Art*_*aru 39
不幸的是,在HTML5 canvas元素中,您无法旋转单个元素.
动画的工作方式就像在MS画中绘画一样:你绘制一些东西,制作一个屏幕..使用橡皮擦去除一些东西,绘制不同的东西,制作一个屏幕..在顶部绘制其他东西,制作一个屏幕......等等.
如果画布上有现有项目 - 您必须将其擦除(使用ctx.fillRect()或clearRect()例如),然后绘制旋转的对象.
如果您在第一时间绘图时不确定如何旋转它:
ctx.save();
ctx.rotate(0.17);
// draw your object
ctx.restore();
小智 16
要旋转单个对象,您必须设置变换矩阵.这很简单:
<body>
<canvas width="1280" height="720" id="pageCanvas">
You do not have a canvas enabled browser
</canvas>
<script>
var context = document.getElementById('pageCanvas').getContext('2d');
var angle = 0;
function convertToRadians(degree) {
return degree*(Math.PI/180);
}
function incrementAngle() {
angle++;
if(angle > 360) {
angle = 0;
}
}
function drawRandomlyColoredRectangle() {
// clear the drawing surface
context.clearRect(0,0,1280,720);
// you can also stroke a rect, the operations need to happen in order
incrementAngle();
context.save();
context.lineWidth = 10;
context.translate(200,200);
context.rotate(convertToRadians(angle));
// set the fill style
context.fillStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
context.fillRect(-25,-25,50,50);
context.strokeRect(-25,-25,50,50);
context.restore();
}
// Ideally use getAnimationFrame but for simplicity:
setInterval(drawRandomlyColoredRectangle, 20);
</script>
</body>
小智 8
基本上,要使对象正确旋转而不使其他形状旋转,您需要:
在上述列表之外绘制的形状不会受到影响.我希望它有所帮助.
这个 html/javascript 代码可能会阐明这个问题：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="233" height="233" style="border:1px solid #d3d3d3;">
your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var canvasWidth=233;
var canvasHeight=233;
var rectWidth=100;
var rectHeight=150;
var x=30;
var y=30;
var translateX= x+(rectWidth/2);
var translateY= y+(rectHeight/2);
ctx.fillRect(x,y,rectWidth,rectHeight);
ctx.translate(translateX,translateY);
ctx.rotate(5*Math.PI/64); /* just a random rotate number */
ctx.translate(-translateX,-translateY);
ctx.fillRect(x,y,rectWidth,rectHeight);
</script>
</body>
</html>
我发现了解与旋转相关的数学很有帮助，我希望这对您也有帮助。
| 归档时间： |
|
| 查看次数： |
76396 次 |
| 最近记录： |