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

Question

我对canvas有一点问题

我正在尝试进行桨式比赛，我想根据鼠标X位置旋转上部球拍我的问题是绘图位置是球拍的左上方正常我希望在绘图后将其更改为位于桨叶的中心以便旋转。

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

这里是更新的函数，它被调用以更新画布。

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

您的翻译有点偏，但很容易修复。考虑这种替代方案 - 将上下文转换为桨的中心。毕竟，这是你将进行轮换的地方。旋转画布，然后绘制以原点为中心的水平线。我已经将我的建议编成法典，并且我已经在局部变量中存储了一些内容以使其更清晰。

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