以前のPhotoshop CS5用の4色グラデーションは、遅くて駄目だという人向けにさくさくと描画されるスクリプトを用意しました。
以下のスクリプトはSafariやGoogle Chrome、IE9以降で動作します。描画されたら画面キャプチャーして使ってください。珍しくAdobe用のJavaScriptではなくて、純粋にブラウザで動くものです。
以下のスクリプトは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 }; // 右下のカラー
【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>
「デジクリゲーム」......何10人ものライターが、何年間書き続けられるかを競うサバイバルゲーム。でも、面白くなさそうなゲームなので脳内妄想する前に却下。最近の為替相場を予想する方が面白いかも。円高になると、ガソリンなどが安くなるのでありがたい。iPadも安くなるか......というと、多分ならないだろうなあ。
で、先週の為替相場を人気のNHK連ドラ風のサブタイトルにしてみました。
< http://ja.wikipedia.org/wiki/あまちゃん
>
第 1週「おら、FXが好きだ！」
第 2週「おら、円買いたくねぇ」
第 3週「おら、利益がでた！」
第 4週「おら、1億とりてぇ」
第 5週「おら、金が好きだ！」
第 6週「世界の為替、大暴れ」
第 7週「おらの貯金に歴史あり」
第 8週「おら、ドキドキがとまんねぇ」
第 9週「おらの大失敗」
第10週「おら、ロスカットされる!?」
第11週「おら、金持ちになりてぇ」
・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>
・Nexus 7（アンドロイドタブレット）使い方辞典
< http://www.openspc2.org/reibun/Android/Nexus7/
>
・JavaScript逆引きハンドブック
< http://www.amazon.co.jp/dp/4863541082
>
・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199
>
・クリエイター手抜きプロジェクト
< http://www.openspc2.org/projectX/
>
・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。