canvasならグラデーションがらくちん

ziolog | とある画像の自動生成<ジェネレータ> --解説02--
とある櫻花の画像生成（ジェネレーター） (さくらインターネット創業日記)

このお二方は、グラデーションに一苦労あったようだ。結局、グレイスケールの文字描画と、グラデーションを、別々に作成して合成しているようだ。まったく、ご苦労様というしかない。

canvasならば、そんな余計な苦労をする必要はない。

var context = canvas.getContext("2d") ;
var gradient = context.createLinearGradient(300, 0, 0, 640) ;
gradient.addColorStop(0, "rgb(235, 115, 52)") ;
gradient.addColorStop(1, "rgb(233, 19, 29)") ;
context.fillStyle = gradient ;
// 描画

これで、300x640のcanvasに、右上から左下にかけて、グラデーションで描画される。全体に対するグラデーションなので、一文字ごとにグラデーションがかかるといった、マヌケなことにはならない。

canvasはこのように簡単であり、flashもsilverlightも、サーバーサイドで動的に動画生成してやる必要もなくなる優れものである。