如何更改html5畫布行的起點和終點位置？

Question

我可以使用以下代碼成功繪制線條：

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();

可以更改直線的起點或終點位置（即坐標）嗎？ 我需要清除整個上下文嗎？ 我想用鼠標拖動兩端以繪制圓或扇形。

Answer 1

您可以使用翻譯將畫布移動到（x，y）

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.translate(50, 50); // move to (50, 50)
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();