javascript - 如何更改原点位置以在 HTML5 Canvas 中旋转绘制的线条

Question

Canvas 有点问题

我正在尝试制作桨游戏，我想根据鼠标 X 位置旋转上桨 我的问题是绘图位置通常是桨的左上角我想在绘图后将其更改为位于桨的中心以进行旋转。

所以桨的原点位置将是中心，每次鼠标移动时，桨将从中心而不是左上角旋转。

这里是调用更新 Canvas 的更新函数。

function update() {
    // Update scores

    updateScore(); 
    // Move the paddles on mouse move
    // Here we will add another condition to move the upper paddle in Y-Axis
    if(mouse.x && mouse.y) {
        for(var i = 1; i < paddles.length; i++) {

        p = paddles[i];

        // the botoom paddle
        if (i ==1){
            p.x = mouse.x - p.w/2;
        }else{
        // the top paddle

        ctx.save(); // saves the coordinate system
        ctx.translate(W/4,H/2); // now the position (0,0) is found at (250,50)
        ctx.rotate(0.30 * mouse.x); // rotate around the start point of your line
        ctx.moveTo(0,0) // this will actually be (250,50) in relation to the upper left corner
        ctx.lineTo(W/4,H/2) // (250,250)
        ctx.stroke();
        ctx.restore(); // restores the coordinate system back to (0,0)

        }// end else    
        }//end for      
    }

Answer 1

您的翻译有一点偏差，但很容易修复。考虑这个替代方案——将上下文翻译到桨的中心。毕竟，这是您要进行轮换的地方。旋转 Canvas ，然后以原点为中心画一条水平线。我整理了我的建议，并在局部变量中存储了一些内容以使其更清晰。

var W = 200;
var H = 200;
var x = W / 2;
var y = H / 2;
var lineLength = 80;

ctx.save();
ctx.translate(x, y);
ctx.rotate(0.3 * mouse.X);
ctx.moveTo(-lineLength / 2,0, 0);
ctx.lineTo(lineLength / 2.0, 0);
ctx.stroke();
ctx.restore();