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)";

旋转html5画布而不重绘画布上的元素

2 个答案: