HTML5画布图像旋转

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/