Question

我需要创建一个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);
    }       
}

修改

好吧，我的错误。我犯了计算错误。经过几个小时后，我已经纠正了计算结果。

此示例正在运行。

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

Answer 1

closePath只会将最后一个点与第一个点对齐，因此您无需执行ctx.lineTo($start,0);，只需将ctx.closePath();放在ctx.stroke();之前。

此外，我认为画布的一切都没问题，（beginPath防止衬里最后指向新的，最重要的是你使用moveTo移动当前点而不衬里）但是你的代码不是。我不知道你要做什么（也许你应该解释一下？）但是你从顶部的一个点开始，然后从右上角开始（所以每个第一行都会叠加）等等。

Answer 2

您可以在最后context.save()循环for内的开头使用conxtext.restore()。这样，在这两个调用之间应用的位置将仅影响当前渲染。

Canvas for（）循环，lineTo（）和closePath（）

2 个答案: