旋轉html5畫布而不重繪畫布上的元素

Question

我不確定是否可行，找不到任何示例。

我想在html5畫布上創建一個紡車。 方向盤上將有100個對象和圖像。 車輪需要快速旋轉。 我不想為車輪的每次移動重新繪制所有100個對象和圖像。 如何在不不斷重繪所有內容的情況下旋轉輪子？

這是一些代碼：

var can = document.getElementById("canvas"),
con = can.getContext("2d"),
angle = 0;

con.fillStyle = "rgba(0, 0, 0, 0.2)";
con.fillRect(0, 0, can.width, can.height);
con.fillStyle = "#fff";
con.fillRect(0, 0, 200, 200);
con.fillStyle = "red";
con.fillRect(10, 10, 120, 120);
con.fillStyle = "blue";
con.fillRect(20, 20, 30, 30);

setInterval(function(){
  angle-=(Math.PI/3)/10; 
  con.save();
  con.translate(10,10);
  con.rotate(angle);
  con.restore();
},10);

這是一個jsFiddle： http : //jsfiddle.net/CfbS3/ 。

Answer 1

完整制作元素圖像，然后旋轉圖像。

function createImage() {
    var image = new Image();
    var imgTmpCanvas = document.createElement("canvas");
    // imgTmpCanvas.setAttribute(...);
    var tmpCtx = imgTmpCanvas.getContext('2d');
    // now paint on tmpCtx as usual
    image.src = imgTmpCanvas.toDataUrl("image/png");
    return image;
}

應該管用。

Answer 2

如果您確實不想更改畫布的實際內容，那么最好的辦法就是只繪制一次內容（就像上面的操作一樣），然后將畫布本身作為HTML元素旋轉。 因此，您可以修改示例代碼並編寫setInterval，如下所示：

setInterval(function(){
  angle-=(Math.PI/3)/10; 
  document.getElementById("canvas").style["transform"] = "rotate(" + angle + "rad)";
},10);

這應該旋轉得很好。 為了獲得Safari支持，您可能還需要添加：

document.getElementById("canvas").style["webkitTransform"] = "rotate(" + angle + "rad)";