1

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

2 回答 2

2

closePath只会将最后一个点与第一个点对齐，所以你不需要这样做ctx.lineTo($start,0);，只需放在ctx.closePath();前面ctx.stroke();。

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

于 2013-02-22T12:16:48.717 回答
0

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

于 2013-02-22T13:33:33.727 回答