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" は鋭い角を作成します (デフォルト)。 」は丸い角を作成します。


•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 キャンバスの基本描画の内容です -関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) を参照してください。

-->