ホームページ > 記事 > ウェブフロントエンド > HTML5キャンバス基本描画線画を描く

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

不言オリジナル: 2018-06-05 15:12:031997ブラウズ

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

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

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b は、id、class、style などの属性に加えて、高さと幅の属性もあります。 5ba626b379994d53f7acf72a64f9b697> 要素に描画するには、次の 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キャンバス基本描画 線画を描く

関連記事

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