別のキャンバスガイド[2]：スタイル、グラデーション、シャドウ

はじめに

前のパートでは、パスの操作方法を見てきましたが、黒だけで描くのは喜びではありません。そのため、このパートでは、キャンバスの色付け、ラインのスタイル設定方法の検討、影の操作方法、グラデーションの操作方法、最後に、いわゆるテンプレートを使用する方法を見つけます。

キャンバスをカラフルにしましょう

キャンバスで既にお気付きのように、塗りつぶしと四角形のレンダリング操作には2つのタイプがあり、それぞれに独自のスタイル設定があります。 これらを変更するには、fillStyleおよびstrokeStyleのコンテキストプロパティを変更する必要があります。これらのプロパティは、値として色だけでなく、後で説明する他の値も使用できます。 次に、色を変更する方法を見ていきます。 これを行うには、fillStyleプロパティとstrokeStyleプロパティを新しい値に設定します。色の場合、これらは文字列になりますが、canvasは次の色記述スキームをサポートします：オレンジ、＃FFA500、rgb（255,165,0）、rgba（255,165,0,1）。

たとえば、カラフルな円を描き、スクリプトにコンテキストのみを残してから、次のコードを追加します。

for(var i=0;i<6;i++){ ctx.fillStyle = 'rgb(' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) +')' ctx.beginPath() ctx.arc(300,300,70,Math.PI/3*i,Math.PI/3*(i+1),false) ctx.lineTo(300,300) ctx.fill() }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注意深い読者が推測したように、このコードは任意の色の6つのセグメントで構成される円を描きます。

線で作業しましょう

また、いくつかのプロパティがあるため、行のパラメータを変更することもできます。それぞれを順番に見てみましょう。

線幅を変更する

線幅の値はキャンバスコンテキストのlineWidthプロパティに格納され、1単位は1ピクセルに対応します。 デフォルト値は当然1.0です。

ライントップスタイル

ライントップスタイルはlineCapプロパティに格納され、3つの可能な値があります：butt、round、sqare、デフォルトスタイルはbuttです。

ライン結合スタイル

線の結合スタイルはlineJoinプロパティに保存され、マイター、ラウンド、ベベルの3つの値を取ることができます。デフォルトのスタイルはマイターです。

マイターについてもう少し

miteLimitプロパティを使用して、巨大なマイターテールの長さを制限できます。デフォルトは10です。

影を落とす

正確には、キャンバスの影は常に投影されます。オフセットはゼロ、ぼかしはゼロです。 ここではすべてがはっきりしているので、シャドウを長い間考慮する価値はありません。シャドウを制御する4つのプロパティがあります（標準値は記号で示されています）。

 shadowOffsetX = 0.0 shadowOffsetY = 0.0 shadowBlur = 0.0 shadowColor = "transparent black"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

たとえば、限られた描画領域で2つの影を互いに投影し、何が起こるかを確認します。

 ctx.beginPath() ctx.arc(200,300,70,0,Math.PI*2,true) ctx.stroke() ctx.clip() ctx.shadowOffsetX = -10 ctx.shadowOffsetY = -10 ctx.shadowBlur = 2 ctx.shadowColor = 'black' ctx.beginPath() ctx.moveTo(100,320) ctx.lineTo(500,320) ctx.moveTo(500,180) ctx.lineTo(100,370) ctx.stroke()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グラデーションを使用する

最後の部分と同様に、方法を検討しましたが、ここでは勾配を検討します。

線形グラデーション

グラデーションオブジェクトの作成

 createLinearGradient(float x1, float y1, float x2, float y2)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-ポイント（x1; y1）からポイント（x2; y2）に渡す線形グラデーションオブジェクトを作成し、コードに行を追加します。

 var gr = ctx.createLinearGradient(0,0,150,150)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グラデーションに色を追加します。

 addColorStop(float offset, string color)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-0〜1の値を取るインデントオフセットでグラデーションに色を追加します。

スクリプトに次の行を追加します。

 gr.addColorStop(0.0,'blue') gr.addColorStop(0.5,'red') gr.addColorStop(1.0,'green')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グラデーションを塗りつぶしスタイルとして適用します。

キャンバスコンテキストのfillStyleプロパティは、値として色だけでなくグラデーションも使用できるため、スクリプトに行を追加します。

 ctx.fillStyle = gr
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最終ステップ、塗りつぶされた長方形を描く

スクリプトに最後の行を追加します。

 ctx.fillRect(0,0,150,150)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

放射状グラデーション

放射状グラデーションを使用する場合、線形グラデーションとの違いは作成時のみです。

 createRadialGradient(float x1, float y1, float r1, float x2, float y2, float r2)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-点（x1; y1）および半径r1を中心とする円から、点（x2; y2）および半径r2を中心とする円への滑らかな色の変化を伴う放射状グラデーションを作成します。 たとえば、ボールを描いて擬似照明を作成します。

 ctx.shadowOffsetX = 10 ctx.shadowOffsetY = 15 ctx.shadowBlur = 10 ctx.shadowColor = '#0F0' var gr = ctx.createRadialGradient(60,60,15,75,75,75) gr.addColorStop(0.0,'#0F0') gr.addColorStop(1.0,'#0DA805') ctx.fillStyle = gr ctx.beginPath() ctx.arc(75,75,75,0,Math.PI*2,false) ctx.fill()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テンプレートを使用します

色とグラデーションに加えて、fillStyleとstrokeStyleは、いわゆるパターンを値として取ることができ、パターンは同じキャンバス要素、画像、またはビデオから作成できます。 例として、 画像を使用します 。 テンプレートはcreatePatternメソッド（オブジェクトany、文字列の繰り返し）を使用して作成され、repeatは次の値を取ることができます： "repeat"、 "repeat-x"、 "repeat-y"、 "no-repeat"。 デフォルト値は「繰り返し」です。 たとえば、次のスクリプトを実行します。

 var img = new Image() img.src = 'brick.jpg' var ptr = ctx.createPattern(img,'repeat') ctx.fillStyle = ptr; ctx.fillRect(50,50,100,100)