Javascript 用于（）循环、lineTo（）和closePath（）的画布

我需要创建一个for循环来绘制浮动的倾斜图像画布。第一张图是可以的，但另一张图是从旧图结束的地方开始的。我正在使用clearPath（）清除旧坐标，但它不起作用

这是我的密码：

function draw(){
    var ctx = $('#canvas')[0].getContext('2d');
    var $width = $('#canvas').parent().width();
    var $canvas_width = 380;
    var $canvas_margin = 15;
    var $canvas_height = 810;

    var $total_draw = $width / Math.ceil($canvas_width);
    var $start = 0;


    for(var $i = 1; $i <= 2; $i++){
        ctx.beginPath();
        ctx.moveTo($start,0);
        ctx.lineTo($canvas_width,0);
        ctx.lineTo($start,$canvas_height);
        ctx.lineTo(Math.abs($canvas_width) * -1,$canvas_height);
        ctx.lineTo($start,0);
        ctx.stroke();
        ctx.closePath();


        $start += ($canvas_width + $canvas_margin);
    }       
}

函数绘图（）{
var ctx=$（'#canvas'）[0].getContext（'2d'）；
var$width=$（'#canvas'）.parent（）.width（）；
var$canvas_width=380；
var$canvas_保证金=15；
var$canvas_height=810；
var$total\u draw=$width/Math.ceil（$canvas\u width）；
var$start=0；
对于（var$i=1；$i
closePath
将最后一个点与第一个点对齐，这样您就不需要执行
ctx.lineTo（$start，0）；
，只需将
ctx.closePath（）；
放在
ctx.stroke（）；
之前

此外，我认为画布上的一切都是好的，（
beginPath
防止将最后一点对齐到新点，最重要的是使用moveTo，将当前点移动到新点而不对齐），但你的代码不是。我不知道你想做什么（也许你应该解释一下？）但是您可以从顶部的一个点开始，然后在右上角的一行（这样每个第一行都将覆盖），等等。
您可以在末尾的
循环
conxtext.restore（）中使用
上下文.save（）
。
这样，在这两个调用之间应用的位置将只影响当前的渲染。
是否使用createPattern方法？因为我尝试过但失败了。如果你不想使用border，那是对的。但是如果你想，你必须写最后一个坐标。如果谈论我的第一句话和border，你的意思是使用
笔划
，否：那是对的此外，为了避免编写
+$start
，您可以使用
翻译
（但不要忘记
保存
，然后
还原
）。请参见此演示。您的代码现在正在做您想做的事情吗？否则，有什么问题吗？
function draw(){
    var ctx = $('#canvas')[0].getContext('2d');
    var $width = $('#canvas').parent().width();
    var $canvas_width = 380;
    var $canvas_margin = 20;
    var $canvas_height = 810;

    var $total_draw = $width / Math.ceil($canvas_width);
    var $start = 0;

    for(var i = 1; i <= $total_draw + 1; i++){
        ctx.beginPath();
        ctx.moveTo($start,0);
        ctx.lineTo($start + $canvas_width,0);
        ctx.lineTo($start, $canvas_height);
        ctx.lineTo(-380 + $start, $canvas_height);
        ctx.lineTo($start,0);
        ctx.stroke();
        ctx.closePath();

        $start = $start + ($canvas_width + $canvas_margin);
    }
}