1

html5 キャンバスを使用してベジエ曲線を作成しましたが、破線にすることは可能でしょうか? 私のコードは次のとおりです。

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 2;
ctx.strokeStyle = "#fff";
ctx.beginPath();
ctx.moveTo(-200, 350);
ctx.bezierCurveTo(199, 604, 220, 180, 500, 350);
ctx.stroke();

ここでjsfiddleを作成しました

html5 キャンバスを使用するのはこれが初めてなので、現時点ではスキルがそれほど高くありません。前もって感謝します。

4

2 に答える 2

3

Chrome の場合、以下を使用できます。

context.setLineDash([2,3,...]);  //pattern, can be more than 2 entries
context.lineDashOffset(0);       //start point (ie. walking ants)
context.getLineDash();

Firefox の場合、以下を使用できます。

context.mozDash = [2,3,...];     //prefixed for Mozilla at this time
context.mozDashOffset = 0;

一般的な関数:

function setDash(context, array, offset) {

    offset = (typeof offset === 'number') ? offset : 0;

    if (typeof context.setLineDash === 'undefined') { //Firefox
        context.mozDash = array;
        context.mozDashOffset = offset;

    }
    else { //Chrome
        context.setLineDash(array);
        context.lineDashOffset = offset
    }
}

ウォーキングアリのデモ (アーカイブから - Firefox と Chrome の両方で動作します):
http://jsfiddle.net/AbdiasSoftware/Mnc94/

于 2013-06-24T22:20:56.557 に答える
1

2013 年 1 月以降、Chrome でこれを行うことができます。ctx.setLineDash([2,3]);ここで、2 はピクセル単位のストローク、3 はピクセル単位のスペースです。

ただし、他のブラウザー (Firefox、IE10、Safari、Opera) はまだこれを実装していません。これは、まだ実装されていない将来の簡素化です。Mozilla には実験的なバージョンmozDashがありますが、私はそれをテストしていません。

これを回避するチェックを実装することをお勧めします。このメソッドが存在する場合は線が破線で表示され、そうでない場合は表示されません。別の方法として、円弧の長さを計算し、ストロークのオンとオフを切り替えて、独自の曲線描画を実装することもできます。そのための回答はこちらを参照してください：Html5 Canvas BezierのDashed Curves

于 2013-06-24T21:06:41.967 に答える