HTML5 画布图像旋转答案

【问题标题】：HTML5 Canvas Image RotationHTML5 画布图像旋转
【发布时间】：2011-12-26 09:10:45
【问题描述】：

我有一个画布，我在上面绘制了一系列可以拖放的图像，每个图像都是一个单独的实体。

我需要根据图像的放置位置旋转该图像以使其看起来合适，在围绕圆圈拖动三角形进行成像时，基线需要始终指向外部。

我以为我可以旋转图像然后在画布上绘制它，但是我在互联网上搜索时似乎发现画布每次都会旋转 - 是否可以只旋转图像然后把它放在画布上？

非常感谢！

【问题讨论】：

标签： image html canvas rotation

【解决方案1】：

是的，你可以，但它不像设置旋转属性那么简单。画布的工作方式您不能专门旋转单个项目，只能旋转整个画布。

要旋转单个项目，您需要旋转画布，放置项目，然后将画布旋转回原来的方向。

这个问题有几个例子：How do I rotate a single object on an html 5 canvas?

【讨论】：

【解决方案2】：

在将图像放置在画布上之前，创建一个缓冲画布，将图像放置在那里，旋转它，然后移植到主画布。

var canvas = document.getElementById('test_canvas');
var ctx = canvas.getContext('2d');

var buffer = document.createElement('canvas');
buffer.width = buffer.height = 60;
var bctx = buffer.getContext('2d');
bctx.translate(30, 30);
bctx.rotate(0.5);
bctx.fillStyle = 'rgb(255, 0, 0)';
bctx.fillRect(-15, -15, 30, 30);

ctx.fillStyle = 'rgb(0, 255, 0)';
ctx.fillRect(30, 30, 30, 30);
ctx.drawImage(buffer, 50, 50);

您可以在我设置的 JSFiddle 上查看此代码 - http://jsfiddle.net/dzenkovich/UdaUA/2/

请注意，您需要密切关注旋转点和缓冲画布大小才能使其正常工作。有关更多信息，请查看我发现的这篇文章 http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/

【讨论】：