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 に答える