Question

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

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

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

非常感谢！

Answer 1

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

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

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

Answer 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/

HTML5画布图像旋转

2 个答案: