Javascript HTML5画布以一定角度绘制图像
我正在Javascript HTML5画布以一定角度绘制图像,javascript,html,drawimage,Javascript,Html,Drawimage,我正在中尝试动画,但无法确定如何以一定角度绘制图像。理想的效果是像往常一样绘制一些图像,其中一个图像缓慢旋转。(如果这有什么区别的话,该图像不在屏幕中央)。在绘制要旋转的图像之前,需要修改变换矩阵 假设图像指向HTMLImageElement对象 var x = canvas.width / 2; var y = canvas.height / 2; var width = image.width; var height = image.height; context.translate(x,
中尝试动画,但无法确定如何以一定角度绘制图像。理想的效果是像往常一样绘制一些图像,其中一个图像缓慢旋转。(如果这有什么区别的话,该图像不在屏幕中央)。在绘制要旋转的图像之前,需要修改变换矩阵
假设图像指向HTMLImageElement对象
var x = canvas.width / 2;
var y = canvas.height / 2;
var width = image.width;
var height = image.height;
context.translate(x, y);
context.rotate(angleInRadians);
context.drawImage(image, -width / 2, -height / 2, width, height);
context.rotate(-angleInRadians);
context.translate(-x, -y);
x,y坐标是画布上图像的中心。我编写了一个函数(基于Jakub的答案),允许用户基于自定义旋转点的自定义旋转在x,y位置绘制图像:
function rotateAndPaintImage ( context, image, angleInRad , positionX, positionY, axisX, axisY ) {
context.translate( positionX, positionY );
context.rotate( angleInRad );
context.drawImage( image, -axisX, -axisY );
context.rotate( -angleInRad );
context.translate( -positionX, -positionY );
}
然后你可以这样称呼它:
var TO_RADIANS = Math.PI/180;
ctx = document.getElementById("canvasDiv").getContext("2d");
var imgSprite = new Image();
imgSprite.src = "img/sprite.png";
// rotate 45º image "imgSprite", based on its rotation axis located at x=20,y=30 and draw it on context "ctx" of the canvas on coordinates x=200,y=100
rotateAndPaintImage ( ctx, imgSprite, 45*TO_RADIANS, 200, 100, 20, 30 );
有趣的是,第一个解决方案适用于这么多人,却没有给出我需要的结果。 最后我不得不这样做:
ctx.save();
ctx.translate(positionX, positionY);
ctx.rotate(angle);
ctx.translate(-x,-y);
ctx.drawImage(image,0,0);
ctx.restore();
其中,
(positionX,positionY)
是画布上我希望图像位于的坐标,(x,y)
是图像上我希望图像旋转的点。您可以执行上下文保存()
和上下文还原()
在执行转换和绘图之前和之后。虽然使用save()/restore()看起来更干净,但效率要低得多。引擎必须存储/恢复所有上下文属性,而不仅仅是我们在这里操作的那些。这在敏感的代码路径中很重要。另一个例子,请参见此(重复)问题和答案:。@JakubWieczorek否,引擎可以轻松地在每个上下文属性上保留“脏”标志,并且只惰性地保存(然后还原)在save()
和restore()
之间接触到的内容。手动调整这是过早的优化。对游戏进行此操作的性能影响是什么,即每个游戏对象都是动画,并且是图像?