以前のPhotoshop CS5用の4色グラデーションは、遅くて駄目だという人向けにさくさくと描画されるスクリプトを用意しました。以下のスクリプトはSafariやGoogle Chrome、IE9以降で動作します。描画されたら画面キャプチャーして使ってください。珍しくAdobe用のJavaScriptではなくて純粋にブラウザで動くものです。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>4-Grad</title></head><body>
<h1>4色グラデーションを描画</h1>
<canvas id="grad" width="512" height="512"></canvas>
<script>
(function(){
var canvasObj = document.getElementById("grad");
var context = canvasObj.getContext("2d");
var p1 = { red: 255, green: 0, blue: 0 }; // 左上のカラー
var p2 = { red: 0, green: 0, blue: 255 }; // 右上のカラー
var p3 = { red: 0, green: 255, blue: 0 }; // 左下のカラー
var p4 = { red: 255, green: 255, blue: 0 }; // 右下のカラー
// 描画範囲を取得
var x1 = 0;
var y1 = 0;
var x2 = canvasObj.width;
var y2 = canvasObj.height;
// グラデーションを描画する前に処理を高速化する前計算（加算方式）
var gradW = x2-x1; // 縦幅
var gradH = y2-y1; // 縦幅
var dRL = (p3.red - p1.red)/gradH; // 加算数
var dGL = (p3.green - p1.green)/gradH;
var dBL = (p3.blue - p1.blue)/gradH;
var dRR = (p4.red - p2.red)/gradH; // 加算数
var dGR = (p4.green - p2.green)/gradH;
var dBR = (p4.blue - p2.blue)/gradH;
var startRL = p1.red; // 開始色（左側）
var startGL = p1.green;
var startBL = p1.blue;
var startRR = p2.red; // 開始色（右側）
var startGR = p2.green;
var startBR = p2.blue;
for(var y=y1; y<y2; y++){
var dR = (startRR - startRL)/gradW; // 横の加算数
var dG = (startGR - startGL)/gradW;
var dB = (startBR - startBL)/gradW;
var tR = startRL;
var tG = startGL;
var tB = startBL;
for(var x=x1; x<x2; x++){
context.fillStyle = "rgb("+parseInt(tR)+", "+parseInt(tG)+", "+parseInt(tB)+")";
context.fillRect(x, y, 1, 1);
tR += dR;
tG += dG;
tB += dB;
}
startRL += dRL;
startGL += dGL;
startBL += dBL;
startRR += dRR;
startGR+= dGR;
startBR += dBR;
}
})();
</script>
</body>
</html>
グラデーションのサイズですが以下の部分のwidthとheightの数値を変更してください。数値の単位はピクセルです。
<canvas id="grad" width="512" height="512"></canvas>
また、4隅のグラデーションカラーは以下の4箇所で設定してください。Photoshop CS5版のようにカラーピッカーは表示されません。(Operaなら標準でカラーピッカー実装されていますが、他のブラウザでは実装されていません)
var p1 = { red: 255, green: 0, blue: 0 }; // 左上のカラー
var p2 = { red: 0, green: 0, blue: 255 }; // 右上のカラー
var p3 = { red: 0, green: 255, blue: 0 }; // 左下のカラー
var p4 = { red: 255, green: 255, blue: 0 }; // 右下のカラー
[
サンプルをダウンロード]