Question

我有以下代码，它绘制了一个小方块的重复图案来填充画布大小（如背景）。我接下来要做的是慢慢旋转方块（连续循环），但我似乎无法让它工作。它只是旋转整个画布。我已经读过我需要做一些上下文保存和恢复的事情，但我不完全理解这是如何工作的。我已经评论了我不确定的内容，只是这样才能正常工作。修改：这是以下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

您的轮换代码存在以下几个问题：

current_data = xpath_html.xpath("string({})".format(formatted_xpath))中的旋转角度以弧度表示，而不是度数。
旋转始终围绕原点进行。默认原点是[0,0]。这就是为什么你的作品正在旋转 - 所有的作品围绕着画布的左上角旋转。

因此，如果您希望您的帐户围绕其中心点旋转，则可以执行以下操作：

使用context.rotate
以弧度表示的角度旋转。此代码将30度转换为弧度：context.translate( rect.centerX, rect.centerY )
绘制矩形有点棘手。 context.rotate(30*Math.PI/180)导致新图形来自[centerX，centerY]，因此您必须偏移绘图命令以将绘图从中心矩形拉回到左上角的矩形：context.translate
完成转换（翻译+旋转）后，您可以使用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; }

如何在画布

1 个答案: