HTML5 Canvas を使用して画像を色で塗りつぶすためのチュートリアルと texture_html5 チュートリアルのヒント

塗りつぶしの色

アートは色と切り離せないものです。今日は塗りつぶしの色を紹介し、色の魅力を体験します。
塗りつぶしの色には主に 2 つのタイプがあります:

1. 基本カラー
2. グラデーションカラー (線形グラデーションと放射状グラデーションにも分かれます)

一つずつ見ていきましょう。

基本色を塗りつぶす
Canvas fillStyle プロパティは、キャンバス上の図形の基本色と塗りつぶしを設定するために使用されます。 fillStyle では単純な色名を使用します。これは非常に単純に見えます。例:

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

1. context.fillStyle = "赤";

以下は、HTML4 仕様で使用可能な 16 個の色の文字列値のリストです。 HTML5 では専用カラーを変更しないため、HTML4 のカラーを HTML5 で正しく表示できます。

これらの色の値はすべて、strokingStyle プロパティと fillStyle プロパティに適用できます。 それでは、基本的な色を塗りつぶす方法をまとめておきます: (ストロークスタイル属性にも使用できます)

(1) カラー文字列塗りつぶしを使用します。

JavaScript コード

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

context.fillStyle =
1. "赤"; (2) 16 進数の数字文字列パディングを使用します。

JavaScript コード

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

context.fillStyle =

"#FF0000"

1. ; (3) 16進数の数字列の略語を入力します。 JavaScript コード

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

context.fillStyle = "#F00"

;

1. (4) rgb()メソッドを使用して色を設定します。 JavaScript コードコンテンツをクリップボードにコピーします

context.fillStyle =

"rgb(255,0,0)";

(5) rgba()メソッドを使用して色を設定します。

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

context.fillStyle =

"rgba(255,0,0,1)"

;

このメソッドの最後のパラメータはアルファ値で、透明度の範囲は 1 (不透明) ～ 0 (透明) です。

(6) hsl()メソッドを使用して色を設定します。

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

context.fillStyle =

"hsl(0,100%,50%)"

;

HSLは色相(H)、彩度(S)、明度(L)の3チャンネルの色を表します。 (7) hsla()メソッドを使用して色を設定します。

JavaScript コード

1. コンテンツをクリップボードにコピーします context.fillStyle =
"hsla(0,100%,50%,1)"

;

上記の 7 文のコードはすべて赤色で「#FF0000」で埋められています。

塗りつぶしグラデーション形状
キャンバス上にグラデーション塗りつぶしを作成するには、線形または放射状の 2 つの基本オプションがあります。線形グラデーションは、水平、垂直、または斜めの塗りつぶしパターンを作成します。放射状グラデーションは、中心点から放射状の塗りつぶしを作成します。グラデーション形状を塗りつぶすには、グラデーション線を追加する、グラデーション線にキーカラーを追加する、グラデーションを適用するという 3 つの手順があります。以下にその例をいくつか示します。
線形グラデーション
3 ステップ戦略:
グラデーション ラインの追加:

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

1. var grd = context.createLinearGradient(xstart,ystart,xend,yend);

グラデーション ラインにキー カラーを追加します (カラー ブレークポイントと同様):

JavaScript コード

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

grd.addColorStop(stop,color);

ここでのストップは 0 から 1 までの浮動小数点数で、ブレークポイントから (xstart, ystart) までの距離とグラデーション全体の長さの割合を表します。

グラデーションを適用:

JavaScript コード

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

context.fillStyle =
1. context.ストロークスタイル = grd;
コードを書いて見てみましょう。

JavaScript コード

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

2. "zh">
4. "UTF-8">
"キャンバスワープ"> "キャンバス" style="ボーダー: 1px ソリッド #aaaaaa; 表示: ブロック; マージン: 50px 自動;"> あなたのブラウザは Canvas をサポートしていませんか? ！早く変えてください！ ！
<スクリプト
window.onload =
11. function(){
12. var Canvas = document.getElementById("canvas"); Canvas.width = 800;
Canvas.height = 600;
var
14. context = Canvas.getContext(
"2d"
15. ); context.rect(200,100,400,400);
17. //グラデーションラインを追加
19. var grd = context.createLinearGradient(200,300,600,300);
20. //カラーブレークポイントを追加
21. grd.addColorStop(0,
"黒"
22. ); grd.addColorStop(0.5,"白"
);
23. grd.addColorStop(1,"黒");
24. //グラデーションを適用
25. context.fillStyle = grd;
26. context.fill();
27. }

31. 実行結果:
    

    グラデーションを全員が一度に理解できるように図解する必要があると思います。
    

    理解を容易にするために、勾配線を有向線分とみなすことをお勧めします。 PS などの描画ツールに慣れていて、グラデーション設定を使用したことがある場合は、よく理解できるはずです。
    ここでのグラデーションラインの始点と終点は画像内である必要はなく、カラーブレークポイントの位置も同じです。ただし、画像の範囲がグラデーション ラインより大きい場合、グラデーション ラインの範囲外では、エンドポイントに最も近いブレークポイントの色が自動的に塗りつぶされます。
    これは 2 つの補助関数を使用した別の例です。

    長方形を描く簡単な方法

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

    1. fillRect(x,y,width,height)、stroke(x,y,width,height)。这两个函数可以分别看做rect()与fill()以及rect()与stroke()的组合。因为rect()仅仅只是规划路径而已，而这两个方法确实实实在在的绘制。   
    2.   
    3. "zh">   
    4.   
    5.     "UTF-8">   
    6.        
    7.   
    8.   
    9. "canvas-warp">   
    10.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
    11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    12.        
33. <スクリプト
34. window.onload = function(){
35. var Canvas = document.getElementById("canvas");
Canvas.width = 800;
36. Canvas.height = 600;
37. var
context = Canvas.getContext(
38. "2d");
//グラデーションラインを追加
40. var grd = context.createLinearGradient(100,300,700,300);
41. //カラーブレークポイントを追加
grd.addColorStop(0,
43. "オリーブ"); grd.addColorStop(0.25,
"あずき色"
44. ); grd.addColorStop(0.5,"アクア"
);
45. grd.addColorStop(0.75,"フクシア");
grd.addColorStop(0.25,
46. "ティール");
47. //グラデーションを適用
48. context.fillStyle = grd; context.ストロークスタイル = grd;
49. context.ストロークRect(200,50,300,50);
50. context.ストロークRect(200,100,150,50); context.ストロークRect(200,150,450,50);
52. context.fillRect(200,300,300,50);
53. context.fillRect(200,350,150,50);
54. context.fillRect(200,400,450,50);
56. context.fillRect(0,550,800,25);
58. }

62. 実行結果:
    

    どちらのページにも水平方向のグラデーションがありますが、線形グラデーションは必ずしも水平である必要はなく、方向はグラデーション ラインの終点を介して任意に設定できることは明らかです。

    放射状グラデーション
    これも 3 ステップの戦略ですが、最初のステップで使用される方法が変更されています。
    グラデーション円を追加:

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

    1. var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

    グラデーション ラインにキー カラーを追加します (カラー ブレークポイントと同様):

    
    

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

    grd.addColorStop(stop,color);

    グラデーションを適用:

    
    
    

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

    context.fillStyle =
    1. context.ストロークスタイル = grd;
    線形グラデーションは 2 つの端点に基づいて定義されますが、放射状グラデーションは 2 つの円に基づいて定義されます。

    例 7-2 を書き直してみましょう。

    
    
    JavaScript コード
    

    コンテンツをクリップボードにコピーします
    2. "zh">
    4. "UTF-8">
    "キャンバスワープ"> "キャンバス" style="ボーダー: 1px ソリッド #aaaaaa; 表示: ブロック; マージン: 50px 自動;"> あなたのブラウザは Canvas をサポートしていませんか? ！早く変えてください！ ！
    <スクリプト
    window.onload =
    11. function(){
    12. var Canvas = document.getElementById("canvas"); Canvas.width = 800;
    Canvas.height = 600;
    var
    14. context = Canvas.getContext(
    "2d"
    15. ); //グラデーションラインを追加
    17. var grd = context.createRadialGradient(400,300,100,400,300,200);
    18. //カラーブレークポイントを追加
    19. grd.addColorStop(0,
    "オリーブ"
    20. ); grd.addColorStop(0.25,"あずき色"
    );
    21. grd.addColorStop(0.5,"アクア");
    grd.addColorStop(0.75,
    22. "フクシア"); grd.addColorStop(0.25,
    "ティール"
    23. );
    24. //グラデーションを適用
    context.fillStyle = grd;
    25. context.fillRect(100,100,600,400);
    27. }

    31. 実行結果:
        

        なぜこの色の組み合わせがとてもそう感じたのでしょうか...忘れてください、これは芸術と呼ばれます。
        createRadialGradient(x0,y0,r0,x1,y1,r1); メソッドは、放射状グラデーション、つまり 2 つの円の間のグラデーションの開始範囲と終了範囲を指定します。
        要約すると、このレッスンでは、fillStyle、createLinearGradient()、createRadialGradient()、addColorStop()、fillRect()、ストロークRect()、およびその他の属性とメソッドについて学び、基本的な色の塗りつぶし、線形の塗りつぶしについて詳しく紹介しました。グラデーションと放射状グラデーション。
        さて、色の塗り方を学んだところで、思う存分色を使って自分だけの作品を描いてみましょう！

        テクスチャを塗りつぶす

        createPattern() の概要
        テクスチャは実際にはパターンの繰り返しであり、塗りつぶしパターンは createPattern() 関数によって初期化されます。 2 つのパラメータ createPattern(img,repeat-style) を渡す必要があります。1 つ目は Image オブジェクト インスタンスで、2 つ目のパラメータは String 型で、シェイプ内に繰り返しパターンを表示する方法を示します。この関数を使用して、画像またはキャンバス全体を図形の塗りつぶしパターンとしてロードできます。
        画像の塗りつぶしには次の 4 種類があります:

        1. 平面で繰り返します:
        2. X 軸で繰り返します:
        4.リピートを使用しない: no-repeat;
        

        実際、createPattern() の最初のパラメータは、canvas オブジェクトまたは video オブジェクトに渡すこともできます。ここでは Image オブジェクトについてのみ説明します。残りは自分で試すことができます。

        
        パターンを作成して塗りつぶす
        まず画像をロードする方法を見てみましょう:

        画像オブジェクトを作成します

        画像オブジェクトの画像ソースを指定します
        

        コードは次のとおりです:

        
        

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

        1. var img = new Image(); //画像オブジェクトを作成します
        2. img.src = "8-1.jpg"; //Image オブジェクトの画像ソースを指定します
        拡張子: HTML の相対パス

        '../ディレクトリまたはファイル名' または 'ディレクトリまたはファイル名' は、現在操作されているファイルが配置されているディレクトリのパスを指します
        '../ディレクトリまたはファイル名' 現在操作しているファイルが存在するディレクトリの上位ディレクトリのパスを指します
        

        その後テクスチャを塗りつぶします:

        
        

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

        1. var pattern = context.createPattern(img,"repeat"); context.fillStyle = パターン
        完成したプログラムを直接見てみましょう。ここでは、このかわいいキリンをテクスチャとして繰り返し塗りつぶしていきます。画像を選択するときは、不自然に短い接続が発生しないように、テクスチャとして左から右、上から下に相互に通信する画像を選択する必要があることに注意してください。

        以下にコードを示します。
        

        
        JavaScript コード

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

        1. html>   
        2. "zh">   
        3.   
        4.      "UTF-8">   
        5.        
        6.   
        7.   
        8. "canvas-warp">   
        9.     "canvas" style="border 1px sol5; ">   
        10.         你的瀏覽器居然不支援Canvas？ ！趕快換一個吧！ ！   
        11.        

          
    32.   
    33. <script>   </script>
    34.     window.onload = function(){   
    35.         var canvas = document.getElementById(">        canvas.width = 800;   
    36.         canvas.height = 600;   
    37.         
    var
    38.  context = canvas.getContext("21.            
    var
    39.  img = 
    40.         img.src = "8-1.jpg";   ;   ;   
    41. ;            img.onload = 
    42. function(){   (){   
    43. (){   (){   (){   (){   
    44. (){   
    45.             var
    46.  pattern = con >
                context.fillStyle = pattern;   
                context.fillRect(0,0,800,600);   
            }   
      
        }   
      

      
    

      
    

    運行結果： 這裡使用了Image的onload事件，它的作用是對圖片進行預先載入處理，即在圖片載入完成後才立即除非其後function的程式碼體。這個是必須的，如果不寫的話，畫布將會顯示黑屏。因為沒有等待圖片載入完成就填滿紋理，導致瀏覽器找不到圖片。 這裡使用了"repeat"，童鞋們也可嘗試使用一下其他三個值，看看會有什麼不同的效果。也可以自己找其他的圖片試試填充，看看效果。