IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
HTML5 JavaScript API
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > HTML5 JavaScript API > Canvasの使い方 > 線や塗りつぶしの色を指定するには?
  カテゴリ別さくいん

線や塗りつぶしの色を指定するには?

線や塗りつぶしの色を指定するには

解説

塗りつぶしの色を指定するには、コンテキストオブジェクトのfillStyleプロパティを使います。
また、線の色を指定するには、コンテキストオブジェクトのstrokeStyleプロパティを使います。

【単色指定】
色を指定するにあたっては、fillStyleやstrokeStyleには、文字列を指定しますが、いくつかの書式があります。

  • 名前で指定する:"red"、"blue"、"white"などの名前で指定します。これはCSSの色指定で使う文字列と同じです。
  • "#rrggbb"で指定する:"#FF9050"のように、16進表記のRGB値で指定します。
  • "rgb(r,g,b)"で指定する:r、g、bには10進表記のRGB値を記述します。
  • "rgb(r,g,b,a)"で指定する:r、g、bに加え、透明度(アルファ値)を指定できます。0が完全な透明、1が不透明です。

次に色指定の例を示します。

// 左上:青い四角枠
context.strokeStyle = "blue";
context.strokeRect(10,20,60,30);

// 右上:赤い四角形
context.fillStyle = "red";
context.fillRect(80,20,60,30);

// 左下:オレンジの四角形
context.fillStyle = "#FF9050";
context.fillRect(10,60,60,30);

// 右下:rgbとrgbaによる指定の例
context.fillStyle = "rgb(128,255,128)";
context.fillRect(80,60,40,20);
context.fillStyle = "rgba(64,64,255,0.8)";
context.fillRect(100,70,40,20);

23.png

【パターン指定】
画像を並べたもので図形を塗りつぶすことができます。

手順としては、まず画像を表すImageオブジェクトを作り、 それをcreatePattern()メソッドに与えて、パターンのオブジェクトを作ります。
パターンを作ったら、あとはfillStyleプロパティに代入するだけです。 以下に例を示します。

ptn.png:
ptn.png

var img = new Image();
img.src = "ptn.png";
img.onload = function(){ 
    context.save(); // この時点での状態を保存しておく
    var ptn = context.createPattern(img, "");
    context.fillStyle = ptn;
    context.fillRect(10,20,60,80);
    context.restore();// 保存しておいた状態に戻す
}

24.png

createPattern()メソッドの第2引数には、敷き詰める向きとして、repeat (縦横)、 repeat-x (横方向のみ), repeat-y (縦方向のみ), no-repeat (敷き詰めない)のいずれかを指定します。

なお、画像ファイルの読み込みには時間がかかることがあるので、パターンの作成以降の処理は画像の読み込みが完了した後の処理として記述しています。もし画像が読み込まれていない状態でcreatePattern()メソッドが呼ばれると、例外が発生し、正しく描画されません。
画像の取り扱いについて、詳しくは、「画像を表示するには?」を参照してください。
なお、onloadイベントハンドラの内容がいつ実行されてもよいように、save()メソッドで状態を保存し、最後にrestore()メソッドで復帰させておく必要があることにも気をつけてください。

グラデーション
グラデーションには線形と円形の2種類があります。
線形はある地点から別の地点に向けてのグラデーション、円形は輪のように広がるグラデーションのことです。
グラデーションで塗りつぶすには、まずグラデーションオブジェクトを作ります。

線形グラデーションを作るには、createLinearGradient()メソッドを使います。
4つの引数は、前半はグラデーションの始点、後半はグラデーションの終点を表します。
さらに、グラデーションオブジェクトに対して、addColorStop()メソッドで、 グラデーションの色を指定していきます。

次の例では、(50,20)から(50,80)へのグラデーションオブジェクトgrd1を作り、 開始点に赤、中間点に黄色、終点に薄緑を指定しています。

var grd1  = context.createLinearGradient(50,20, 50,80);
grd1.addColorStop(0,"red");
grd1.addColorStop(0.5,"yellow");
grd1.addColorStop(1,"lightgreen");

この例では、始点と終点のX座標が同じなので垂直方向のグラデーションですが、 始点と終点を結ぶ線が斜めになるように指定すると、斜めのグラデーションを作ることもできます。
あとは、このグラデーションをfillStyleプロパティに指定します。

context.fillStyle = grd1;
context.fillRect(20,20,60,80);

円形グラデーションを作るには、createRadialGradient()メソッドを使います。
6つの引数は、前半はグラデーションを開始する円、後半はグラデーションを終了する円を表します(中心のX座標,中心のY座標,半径の順)。
そして、線形のときと同様に、グラデーションオブジェクトに対して、addColorStop()メソッドで、 グラデーションの色を指定していきます。

次の例では、(150,60)を中心とし、半径が10の円から、 (150,60)を中心とし、半径が40の円へのグラデーションオブジェクトgrd2を作り、 開始点に赤、中間点に黄色、終点に薄緑を指定しています。

var grd2  = context.createRadialGradient(150,60,10, 150,60,40);
grd2.addColorStop(0,"red");
grd2.addColorStop(0.5,"yellow");
grd2.addColorStop(1,"lightgreen");

この例では、開始円と終了円の中心は同一ですが、別の座標を指定して偏ったグラデーションを作ることもできます。
あとは、このグラデーションをfillStyleプロパティに指定します。

context.fillStyle = grd2;
context.fillRect(120,20,60,80);

グラデーションの例の結果は次のようになります。

25.png

関連項目

Canvasとは
Canvasの状態を保存しておくには?
画像を表示するには?



シャープのマスクシャープのマスク
シャープが製造・販売する不織布マスク。
Surface Book 3Surface Book 3
Microsoftが販売するデタッチャブルPC。
Surface Go 2Surface Go 2
Microsoftが発表した2in1 PC。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2024年3月19日現在
ランキング1   ICT (用語辞典)
ランキング2   AirDrop (用語辞典)
ランキング3   コンテキスト  (用語辞典)
ランキング4   セグメント  (用語辞典)
ランキング5   アノテーション  (用語辞典)
ランキング6   オムニチャネル  (用語辞典)
ランキング7   スワイプ  (用語辞典)
ランキング8   インスタンス化  (用語辞典)
ランキング9   カラム  (用語辞典)
ランキング10   FOMO  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについて運営会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2023 GRAS Group, Inc. All rights reserved.