HTML Canvas に動的に円形グラデーションを描画するコードを紹介します。
概要
HTML Canvasで円形グラデーションを描画するには、createRadialGradient()メソッドを利用します。
createRadialGradient()
createRadialGradient()の引数は以下になります。
createRadialGradient(グラデーションの開始円のX座標, グラデーションの開始円のY座標, グラデーションの開始円の半径, グラデーションの終了円のX座標, グラデーションの終了円のY座標, グラデーションの終了円の半径)
グラデーション開始とグラデーション終了の円の中心が一致している場合
グラデーション開始とグラデーション終了の円の中心が一致していない場合
コード例 (グラデーション開始とグラデーション終了の円の中心が一致している場合)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
body {
background: #C0C0C0;
}
</style>
<script>
function PageLoad() {
var CanvasWidth = 1200;
var CanvasHeight = 480;
var canvas = document.getElementsByTagName('canvas')[0],
ctx = null,
grad = null,
color = 255;
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
grad = ctx.createRadialGradient(0, 0, 64, 0, 0, 512);
grad.addColorStop(0, '#000000');
grad.addColorStop(1, '#2869fd');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
canvas.addEventListener('mousemove', function (evt) {
var width = window.innerWidth,
height = window.innerHeight,
x = event.clientX,
y = event.clientY,
grad = ctx.createRadialGradient(x, y, 64, x, y,512);
grad.addColorStop(0, '#000000');
grad.addColorStop(1, '#2869fd');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
}, false);
}
}
</script>
</head>
<body onload="PageLoad();">
<canvas width="1200" height="480"></canvas>
</body>
</html>
解説
ページの読み込み時にbodyタグのonloadによりPageLoad()関数が実行されます。
PageLoad関数の下記コードがページ読み込み時に実行されます。
キャンバスオブジェクトはgetElementsByTagName()関数でオブジェクトを取得し、getContextでキャンバスのコンテキストを取得します。初期化はコンテキストのclearRect()メソッドでクリアします。グラデーションの作成は、コンテキストのcreateRadialGradient()メソッドで作成します。成功するとグラデーションオブジェクトが戻り値で返ります。グラデーションのカラーはグラデーションオブジェクトの addColorStopメソッドで指定します。
キャンバスへの描画はコンテキストのfillStyleにグラデーションオブジェクトを代入し、fillRectメソッドでグラデーションを描画できます。
var CanvasWidth = 1200;
var CanvasHeight = 480;
var canvas = document.getElementsByTagName('canvas')[0],
ctx = null,
grad = null,
color = 255;
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
grad = ctx.createRadialGradient(0, 0, 64, 128, 64, 320);
grad.addColorStop(0, '#b43700');
grad.addColorStop(1, '#ffe063');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
}
}
キャンバス上をマウスポインタが移動すると下記コードが実行されます。キャンバスでのマウス移動の検出の詳細は
こちらの記事を参照して下さい。
マウスポインタの座標を中心にして円形グラデーションを作成し、キャンバスに描画します。
canvas.addEventListener('mousemove', function (evt) {
var width = window.innerWidth,
height = window.innerHeight,
x = event.clientX,
y = event.clientY,
grad = ctx.createRadialGradient(x, y, 64, x, y,512);
grad.addColorStop(0, '#000000');
grad.addColorStop(1, '#2869fd');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
}, false);
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
青色のキャンバス内でマウスポインタを移動させると、リアルタイムでグラデーションが変化します。
コード例 (グラデーション開始とグラデーション終了の円の中心が一致していない場合)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
body {
background: #C0C0C0;
}
</style>
<script>
function PageLoad() {
var CanvasWidth = 1200;
var CanvasHeight = 480;
var canvas = document.getElementsByTagName('canvas')[0],
ctx = null,
grad = null,
color = 255;
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
grad = ctx.createRadialGradient(0, 0, 64, 128, 64, 320);
grad.addColorStop(0, '#b43700');
grad.addColorStop(1, '#ffe063');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
canvas.addEventListener('mousemove', function (evt) {
var width = window.innerWidth,
height = window.innerHeight,
x = event.clientX,
y = event.clientY,
grad = ctx.createRadialGradient(x, y, 64, x+128, y+64, 320);
grad.addColorStop(0, '#b43700');
grad.addColorStop(1, '#ffe063');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
}, false);
}
}
</script>
</head>
<body onload="PageLoad();">
<canvas width="1200" height="480"></canvas>
</body>
</html>
解説
ロジックは先の例と同様です。createRadialGradientのグラデーション終了の円の中心をマウスポインタの座標からx方向に+128, y方向に+64して、グラデーション開始と終了の円の中心をずらしています。
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
青色のキャンバス内でマウスポインタを移動させると、リアルタイムでグラデーションが変化します。グラデーションの開始位置と終了位置の中心点が違うため、グラデーションが対称になっていないことも確認できます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2016-07-31
作成日: 2016-07-31
