HTML5 キャンバスの基本的な描画塗りつぶしスタイルの実装

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b は、グラフィックを描画するために使用される HTML5 の新しいタグです。実際、このタグの特徴は、このタグが CanvasRenderingContext2D オブジェクトを取得できることです。このオブジェクトは、描画用の JavaScript スクリプトを通じて制御できます。
5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b は、id、class、style などの属性に加えて、高さと幅の属性もあります。 5ba626b379994d53f7acf72a64f9b697> 要素に描画するには、次の 3 つの主な手順があります。
1. Canvas オブジェクトである、DOM オブジェクトを取得します。 Canvas オブジェクトを使用して CanvasRenderingContext2D オブジェクトを取得します。
3. 描画のために CanvasRenderingContext2D オブジェクトを呼び出します。

塗りつぶしスタイル 先ほど使用したfillStyleとstrokingStyleでは、色の設定に加えて、他の塗りつぶしスタイルも設定できます。

•線形グラデーション 使用手順
(1) var grd = context。 .createLinearGradient (xstart, ystart, xend,yend) は線形グラデーションを作成し、開始座標と終了座標を設定します。
(2) grd.addColorStop(stop, color) は線形グラデーションに色を追加します。stop は 0 ～ 1 の値です。 ;
( 3) context.fillStyle=grd が context に割り当てられます。

•放射状グラデーション
このメソッドは、最初のステップで受け取るパラメーターが異なることを除いて、線形グラデーションと似ていますvar grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1); start 円の中心の座標と円の半径、および終点の中心の座標と円の半径。

•ビットマップ塗りつぶし
createPattern(img,repeat-style) は画像塗りつぶしを使用します。repeat-style は、repeat、repeat-x、repeat-y、no-repeat です。

var canvas = document.getElementById("canvas");   

        var context = canvas.getContext("2d");   

      

        //线性渐变   

        var grd = context.createLinearGradient( 10 , 10, 100 , 350 );   

        grd.addColorStop(0,"#1EF9F7");   

        grd.addColorStop(0.25,"#FC0F31");   

        grd.addColorStop(0.5,"#ECF811");   

        grd.addColorStop(0.75,"#2F0AF1");   

        grd.addColorStop(1,"#160303");   

        context.fillStyle = grd;   

        context.fillRect(10,10,100,350);   

      

        //径向渐变   

        var grd = context.createRadialGradient(325 , 200, 0 , 325 , 200 , 200 );   

        grd.addColorStop(0,"#1EF9F7");   

        grd.addColorStop(0.25,"#FC0F31");   

        grd.addColorStop(0.5,"#ECF811");   

        grd.addColorStop(0.75,"#2F0AF1");   

        grd.addColorStop(1,"#160303");   

        context.fillStyle = grd;   

        context.fillRect(150,10,350,350);   

      

        //位图填充   

        var bgimg = new Image();   

        bgimg.src = "background.jpg";   

        bgimg.onload=function(){   

            var pattern = context.createPattern(bgimg, "repeat");   

            context.fillStyle = pattern;   

            context.strokeStyle="#F20B0B";   

            context.fillRect(600, 100, 200,200);   

            context.strokeRect(600, 100, 200,200);   

        };

効果は次のとおりです:

上記は、基本的な HTML5 キャンバス描画の塗りつぶしスタイルの実装の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.ん）！