Canvasでグラデーションを作る

Canvasをマスターすべく学習してますが、JavaScriptもがんばらないといけないので、大変です。

3年間くらいはじっくり取り組まないといけないと何かで読んだので、コツコツやっていきます。

グラデーション

今回は、グラデーションです。

線状のグラデーションの場合は、

createLinearGradient（x,y,x1,y1）;

CanvasRenderingContext2D.createLinearGradient()

円状のグラデーションの場合は、

createRadialGradient

CanvasRenderingContext2D.createRadialGradient()

となってます。

線の場合は、始めと終わりの座標を設定して方向を決めて、途中のグラデ具合の割合（％）を決めればいいのですが、円の場合は、半径で距離を決めるのでややこしいです。慣れないといけないです。

コード

// rect
let linearGradient = ctx.createLinearGradient(50, 50, 50, 250);
linearGradient.addColorStop(0, 'white');
linearGradient.addColorStop(0.5, 'red');
linearGradient.addColorStop(1.0, 'blue');
ctx.fillStyle = linearGradient;
ctx.fillRect(50, 50, 200, 200);

// arc
ctx.beginPath();
let radialGradient = ctx.createRadialGradient(450, 150, 30, 450, 150, 100);
radialGradient.addColorStop(0.0, 'yellow');
radialGradient.addColorStop(0.5, 'orange');
radialGradient.addColorStop(1.0, 'green');
ctx.fillStyle = radialGradient;
ctx.arc(450, 150, 100, 0, Math.PI * 2, false);
ctx.fill();

ブラウザで確認

ブラウザで見たい方は下のサイトにあります。私の個人サイト（素材置場）です。

canvas | notenonote