Javascript 如何更改原点位置以旋转HTML5画布中的绘制线

我对帆布有点问题

我正在尝试做一个划桨游戏，我想根据鼠标X位置旋转上划桨我的问题是绘图位置是划桨的左上角，正常情况下，我想在绘图后将其更改为在划桨的中心旋转

因此，拨片的原始位置将是中心，每次鼠标移动拨片时，拨片将从中心而不是左上角旋转

这里是updated函数，它被调用来更新画布

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      
    }

函数更新（）{
//更新分数
updateScore（）；
//在鼠标移动时移动拨片
//在这里，我们将添加另一个条件，以在Y轴上移动上部挡板
if（mouse.x&&mouse.y）{
对于（变量i=1；i
你的翻译有点不太好，但是很容易解决。考虑一下这个选项——把上下文转换成桨的中心。毕竟，这是你要做旋转的地方。旋转画布，然后画一个围绕原点的水平线。我已经编纂了我的建议，我已经存储了一些东西。局部变量，使其更清晰
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();