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 =
10. function(){
11. var Canvas = document.getElementById("canvas"); Canvas.width = 800;
Canvas.height = 600;
var
13. context = Canvas.getContext(
"2d"
14. ); context.rect(200,100,400,400);
16. //グラデーションラインを追加
18. var grd = context.createLinearGradient(200,300,600,300);
19. //カラーブレークポイントを追加
20. grd.addColorStop(0,
"黒"
21. ); grd.addColorStop(0.5,"白"
);
22. grd.addColorStop(1,"黒");
23. //グラデーションを適用
24. context.fillStyle = grd;
25. context.fill();
26. }