javascript - 如何旋转 Canvas 中的元素

Question

我有以下代码，它绘制了重复的小方 block 图案以填充 Canvas 大小(如背景)。接下来我想做的是慢慢旋转方 block (连续循环)，但我似乎无法让它工作。它只是旋转整个 Canvas 。我读到我需要做一些上下文保存和恢复的事情，但我不完全理解这是如何工作的。我已经注释掉了我不确定的部分，这样它就可以工作了。编辑:这是一个 codepen以下内容

var mainCanvas = document.getElementById("myCanvas");
var mainContext = mainCanvas.getContext('2d');

var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;

var requestAnimationFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame || 
                            window.msRequestAnimationFrame;
var rotate = 1;

var elementWidth = 40;
var elementHeight = 40;
var canvasWidthGrid = canvasWidth / elementWidth;
var canvasHeightGrid = canvasHeight / elementHeight;

function drawShape() {
    mainContext.clearRect(0, 0, canvasWidth, canvasHeight);
    mainContext.fillStyle = "#EEEEEE";
    mainContext.fillRect(0, 0, canvasWidth, canvasHeight);

    mainContext.fillStyle = "#66d";
    mainContext.beginPath();
    //mainContext.save();

    for (var x = 0, i = 0; i < canvasWidthGrid; x+=90, i++) {
        for (var y = 0, j=0; j < canvasHeightGrid; y+=90, j++) {
            //mainContext.rotate( rotate );
            mainContext.fillRect (x, y, 45, 40);
            //mainContext.restore();
        }
    }

    requestAnimationFrame(drawShape);

    rotate++;
}

drawShape();

Answer 1

您的轮换代码存在一些问题:

• context.rotate 中的旋转 Angular 以弧度表示，而不是度数。
• 旋转始终围绕原点进行。默认原点为 [0,0]。这就是为什么你的矩形会像现在这样旋转——所有的矩形都围绕 Canvas 的左上角旋转。

因此，如果您希望矩形围绕其中心点旋转，您可以这样做:

• 使用 context.translate( rect.centerX, rect.centerY ) 将旋转点设置为矩形中心点
• 旋转以弧度表示的 Angular 。此代码将 30 度转换为弧度:context.rotate(30*Math.PI/180)
• 绘制矩形有点棘手。 context.translate 会导致新绘图从 [centerX,centerY] 开始，因此您必须偏移绘图命令才能将绘图从中心矩形拉回左上角矩形: context.fillRect( -45/2,-40/2,45,50)
• 完成转换(平移+旋转)后，您可以使用 context.setTransform(1,0,0,1,0,0) 重置为默认方向

这是使用这些新技巧重构的代码:

var mainCanvas = document.getElementById("myCanvas");
var mainContext = mainCanvas.getContext('2d');

var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;

var rotate = 0;

var elementWidth = 40;
var elementHeight = 40;
var canvasWidthGrid = canvasWidth / elementWidth;
var canvasHeightGrid = canvasHeight / elementHeight;

drawShape();


function drawShape() {
    mainContext.clearRect(0, 0, canvasWidth, canvasHeight);
    mainContext.fillStyle = "#EEEEEE";
    mainContext.fillRect(0, 0, canvasWidth, canvasHeight);

    mainContext.fillStyle = "#66d";
    mainContext.beginPath();

    for (var x = 0; x<canvasWidth; x+=90) {
        for (var y = 0; y<canvasHeight; y+=90) {
            // set origin to center rect
            mainContext.translate(x+45/2,y+40/2);
            // rotate
            mainContext.rotate( rotate );
            mainContext.fillRect (-45/2, -40/2, 45, 40);
            // reset
            mainContext.setTransform(1,0,0,1,0,0);
        }
    }

    requestAnimationFrame(drawShape);

    rotate+=Math.PI/90;
}

body{ background-color: ivory; }
canvas{border:1px solid red; margin:0 auto; }

<canvas id="myCanvas" width=360 height=360></canvas>