Javascript 如何缩放画布上用于绘制直线/曲线的所有点？

我正在通过

mousedown

和

mousemove

事件记录画布上绘制的所有点。调整画布大小时（例如，如果画布大小为100w x 200h，用户将其设置为200w x 400h），我希望以新的比例重新绘制所有这些点/线。正确的方法是什么

我目前使用的代码如下，但它没有正确绘制。它画了奇怪的额外线条

为了保存点，我在

mousedown

和

mousemove

中记录点，并在

mouseup

中标记一行

在调整大小事件时调用：

//The new ratios
var wRatio = canvas.width / oldWidth;
var hRatio = canvas.height / oldHeight;

//We need to scale and draw all our points
for ( var i = 0, last = savedPoints.length - 1; i < last; i++ ) {
    var start = savedPoints[ i ];
    var end = savedPoints[ i + 1 ];

    //We're at a new line
    if ( start === "stopline" ) continue;

    //We're finishing a previous line
    else if ( end === "stopline" ) {
        i++;
        continue;
    }

    //Resize them
    start.x = start.x * wRatio;
    start.y = start.y * hRatio;
    end.x = end.x * wRatio;
    end.y = end.y * hRatio;

    //These lines don't make a difference
    //savedPoints[ i ] = start;
    //savedPoints[ i + 1 ] = end;

    //Start recording
    context.beginPath();

    //Move the "pen" to the point
    context.moveTo( start.x, start.y );

    //Make the connection of the "line" with our data (I draw the lines originally this way to make more "natural")
    context.quadraticCurveTo( start.x, start.y, end.x, end.y );

    //This doesn't work either
    //context.lineTo( start.x, start.y, end.x, end.y );

    //Draw the line
    context.stroke();
}

//新比率
var wRatio=canvas.width/oldWidth；
var hRatio=canvas.height/oldHeight；
//我们需要衡量并得出我们所有的观点
for（变量i=0，last=savedPoints.length-1；i

我认为您的问题在于，您通过修改

开始

和

结束

对象，对每个点应用了两次比率。下一次迭代中，

i=i+1

，

savedPoints[i]

已经修改过一次

    //The new ratios
    var wRatio = canvas.width / oldWidth;
    var hRatio = canvas.height / oldHeight;

    //We need to scale and draw all our points
    for ( var i = 0, last = savedPoints.length - 1; i < last; i++ ) {
        var start = savedPoints[ i ];
        var end = savedPoints[ i + 1 ];
        var endx, endy, startx, starty;

        //We're at a new line
        if ( start === "stopline" ) continue;

        //We're finishing a previous line
        else if ( end === "stopline" ) {
            i++;
            continue;
        }

        //Resize them
        startx = start.x * wRatio;
        starty = start.y * hRatio;
        endx = end.x * wRatio;
        endy = end.y * hRatio;

        //Start recording
        context.beginPath();

        //Move the "pen" to the point
        context.moveTo( startx, starty );

        //Make the connection of the "line" with our data (I draw the lines originally this way to make more "natural")
        context.quadraticCurveTo( startx, starty, endx, endy );

        //This doesn't work either
        //context.lineTo( startx, starty, end.x, end.y );

        //Draw the line
        context.stroke();
    }

    for ( var i = 0, last = savedPoints.length - 1; i < last; i++ ) {
        if (savedPoints[i] !== 'stopline') {
            savedPoints[i].x *= wRatio;
            savedPoints[i].y *= hRatio;
        }
    }

//新比率
var wRatio=canvas.width/oldWidth；
var hRatio=canvas.height/oldHeight；
//我们需要衡量并得出我们所有的观点
for（变量i=0，last=savedPoints.length-1；i

谢谢，这就解决了错误绘图的问题！但现在我看到图像没有调整大小。我所做的只是改变x/y，而不是它们之间的距离（因此，如果我画一个x，它总是保持相同的大小）。你知道怎么计算吗？你能编辑一下你的答案吗？这样我就可以把它标记为答案了？它所需要的只是：在循环中，更改为

startX=start.x*wRatio

，对startY也是如此（就像您对endX/endY所做的那样），然后在末尾放置一个循环，将比率保存回

savedPoints

数组。（我发现只有在第一次循环完成后保存比率时，它才有效）添加了您要求的更改。这是未经测试的，但我相信它会正常工作。谢谢，只有两个小错误。您的

context.moveTo（start.x，start.y）和
context.quadraticCurveTo（start.x，start.y，endx，endy）使用的是
start.x
和
start.y
而不是
startX
和
startY
局部变量。你能换一下吗？