HTML5画布drawImage在一个角度

我正在试验动画<canvas>并且无法确定如何以一个角度绘制图像。所需的效果是像往常一样绘制一些图像，一个图像缓慢旋转。（这个图像不在屏幕的中心，如果这有什么区别的话）。HTML5画布drawImage在一个角度

2010-09-25 Greg

您需要在绘制要旋转的图像之前修改转换矩阵。

假设图像指向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坐标是画布上图像的中心。

来源

2010-09-25 10:48:22

而不是在最后旋转/翻译，你可以在做转换和绘图之前和之后做一个'context.save（）'和'context.restore（）'。 – 2010-09-25 15:53:30

+24

虽然使用save（）/ restore（）看起来更清晰，但效率会更低。引擎将不得不存储/恢复所有的上下文属性，而不仅仅是我们在这里操作的那些属性。这在敏感的代码路径中很重要。 – 2010-09-25 17:39:28

另一个例子，看到这个（重复）的问题和答案：[使用HTML5画布表盘 - 旋转关于任意点]（http://stackoverflow.com/questions/4649836/dial-of-a-gauge-using -html5帆布 - 转 - 约-任意点/ 4650102＃4650102）。 – Phrogz 2011-01-10 20:52:32

我写了一个功能（基于的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);

来源

2014-06-05 09:56:35 Yaume

有意思的是，第一个解决方案为这么多的人，它并没有给我所需要的结果。最后，我不得不这样做：

ctx.save(); 
ctx.translate(positionX, positionY); 
ctx.rotate(angle); 
ctx.translate(-x,-y); 
ctx.drawImage(image,0,0); 
ctx.restore();

其中(positionX, positionY)是我想要的形象被定位在和(x, y)就是我想要的图像旋转图像上的点在画布上的坐标。

来源

2017-10-24 23:48:01 PetrolHead

HTML5画布drawImage在一个角度

回答

相关问题