canvas要素で塗りや線に色を適用する
canvas要素で塗りや線に色を適用するには、塗りはcontext.fillStyleプロパティ、線はcontext.strokeStyleプロパティを使用します。
構文
// 塗りつぶし
context.fillStyle = color;
// 線
context.strokeStyle = color;プロパティ値
| 型 | 説明 | |
|---|---|---|
| color | string | 付けたい色 |
指定する色はCSSの16進数カラーやネームカラー、rgba関数などの指定が可能です。
サンプルコード
HTML
<canvas width="150" height="150" id="sample"></canvas>JavaScript
var canvasElem = document.getElementById('sample'),
ctx = canvasElem.getContext('2d');
ctx.fillStyle = '#ccc';
ctx.strokeStyle = 'red';
ctx.rect(25, 25, 100, 100);
ctx.fill();
ctx.stroke();