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/