HTML5キャンバス基本描画 線画を描く

は HTML5 の新しいタグで、HTML5 のキャンバスの基本的な描画方法を中心に詳しく紹介します

。 は、グラフィックを描画するために使用される HTML5 の新しいタグです。実際、このタグは CanvasRenderingContext2D オブジェクトを取得できることが特徴です。 JavaScript スクリプトを通じて描画するためのこのオブジェクト。

は、id、class、style などの属性に加えて、高さと幅の属性もあります。 > 要素に描画するには、次の 3 つの主な手順があります:

1. Canvas オブジェクトである DOM オブジェクトを取得します。 Canvas オブジェクトを呼び出して CanvasRenderingContext2D オブジェクトを取得します。
3. 描画する CanvasRenderingContext2D オブジェクトを呼び出します。

Line 属性

上記で使用した lineWidth 属性に加えて、ラインには次の属性もあります:

•lineCap この属性は、ラインの終端のライン キャップのスタイルを設定または返します。次の値を指定できます。 「butt」は線の各端に直線のエッジを追加します (デフォルト)。
「round」は線の各端に丸いキャップを追加します。
「square」はそれぞれに正方形のキャップを追加します。行の終わり。

•lineJoin プロパティは、2 つの線が交わるときに作成される角のタイプを設定または返します。次の値を取得できます。 "miter" は鋭い角を作成します (デフォルト)。
「round」は角を丸くします。

•miterLimit プロパティは、マイターの最大長を設定または返します (デフォルトは 10)。マイター長とは、2 本の線が交わる内側の角と外側の角の間の距離を指します。 miterLimit は、lineJoin 属性が "miter" の場合にのみ有効です。

JavaScript コード

コンテンツをクリップボードにコピーします

var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    //测试lineCap属性 
    //设置基准线便于观察 
    context.moveTo(10,10);   
    context.lineTo(10,200);   
    context.moveTo(200,10);   
    context.lineTo(200,200);   
    context.lineWidth="1";   
    context.stroke();   
    //butt 
    context.beginPath();   
    context.moveTo(10,50);   
    context.lineTo(200,50);   
    context.lineCap="butt";   
    context.lineWidth="10";   
    context.stroke();   
    //round 
    context.beginPath();   
    context.moveTo(10,100);   
    context.lineTo(200,100);   
    context.lineCap="round";   
    context.lineWidth="10";   
    context.stroke();   
    //square 
    context.beginPath();   
    context.moveTo(10,150);   
    context.lineTo(200,150);   
    context.lineCap="square";   
    context.lineWidth="10";   
    context.stroke();   
    //测试linJoin属性 
    //miter 
    context.beginPath();   
    context.moveTo(300,50);   
    context.lineTo(450,100);   
    context.lineTo(300,150);   
    context.lineJoin="miter";   
    context.lineWidth="10";   
    context.stroke();   
    //round 
    context.beginPath();   
    context.moveTo(400,50);   
    context.lineTo(550,100);   
    context.lineTo(400,150);   
    context.lineJoin="round";   
    context.lineWidth="10";   
    context.stroke();   
    //square 
    context.beginPath();   
    context.moveTo(500,50);   
    context.lineTo(650,100);   
    context.lineTo(500,150);   
    context.lineJoin="bevel";   
    context.lineWidth="10";   
    context.stroke();   
    //测试miterLimit属性 
    context.beginPath();   
    context.moveTo(700,50);   
    context.lineTo(850,100);   
    context.lineTo(700,150);   
    context.lineJoin="miter";   
    context.miterLimit="2";   
    context.lineWidth="10";   
    context.strokeStyle="#2913EC";   
    context.stroke();

各属性のさまざまな値の影響は次のとおりです:

関連する推奨事項:

HTML5 キャンバスを使用する画像の色とテクスチャを塗りつぶします

JavaScript HTML5キャンバスは、ドラッグ可能な中国の省地図を実装します

以上がHTML5キャンバス基本描画 線画を描くの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。