http://www.fujidig.com/misc/js/treemap.html 元ネタ : 二分木画像化レシピ - 日記を書く [・w・] はやみずさん 以前の Ruby のとき : 二分木の画像化 - fujidigの雑記 以前の Ruby のとき : 赤黒木アニメーション - fujidigの雑記 この前は Ruby で PostSc…

globalCompositeOperation = 'darker' が Firefox と Opera で使えなくて、 Safari でも自分の期待する動作と違う。 例えば、色180の上に色100でdarkerで描画したとき 期待する動作: 結果の色が 80 になる ( 80 = 180 - 100 ) Safari の動作: 結果の色が 25 …

function drawEllipse(ctx, x0, y0, x1, y1, fill_p) { var w = (x1 - x0) / 2; var h = (y1 - y0) / 2; var C = 0.5522847498307933; var c_x = C * w; var c_y = C * h; ctx.beginPath(); ctx.moveTo(x1, y0 + h); ctx.bezierCurveTo(x1, y0 + h - c_y, x0…

var canvas = document.body.appendChild(document.createElement('canvas')); canvas.width = 400; canvas.height = 400; var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(200, 100); ctx.bezierCurveTo(200, 45, 155, 0, 100, 0); ctx.be…

楕円を描画したい。scale を使うと線の幅が変わっちゃうだろうなあと思ったら案の定そうだった。 var canvas = document.body.appendChild(document.createElement('canvas')); canvas.width = 400; canvas.height = 300; var ctx = canvas.getContext('2d')…

getImageData & putImageData ! http://www.fujidig.com/misc/js/canvas/transparent-color-copy.html var Color = function Color(r, g, b, a) { this.r = r & 255; this.g = g & 255; this.b = b & 255; this.a = a; if (typeof (this.a) == 'undefined') …

getImageData!! http://www.fujidig.com/misc/js/canvas/trim.html var canvas = document.body.appendChild(document.createElement('canvas')); canvas.width = 200; canvas.height = 200; var ctx = canvas.getContext('2d'); for(var i = 0; i < 3; i++)…

http://www.fujidig.com/misc/js/canvas/additive-color.html getImageData や opera-2dgame の getPixel で色を取得できると知ったのでやったみた。 キャンバスで遊び中 - 光の三原色 - fujidigの雑記を改造。 あと Color クラスとか作った。どうみても車輪…

http://www.fujidig.com/misc/js/canvas/rainbow.html var canvas = document.body.appendChild(document.createElement('canvas')); canvas.width = 200; canvas.height = 200; var ctx = canvas.getContext('2d'); var radgrad = ctx.createRadialGradient…

http://www.fujidig.com/misc/js/canvas/oekaki.html mousemoveイベントの発行タイミングとドラッグ - 素人がプログラミングを勉強していたブログの改造。 たしか一番最初にCanvasをいじったプログラム。この記事がCanvasを触るきっかけでした（前からいつか…

HSP でもこういうのを作ったことを記憶してます。なつかしす。 http://www.fujidig.com/misc/js/canvas/get-image-data.html function rand256() { return Math.floor(Math.random()*256); } var canvas = document.body.appendChild(document.createElement…

var canvas = document.body.appendChild(document.createElement('canvas')); canvas.width = 480; canvas.height = 480; var ctx = canvas.getContext('2d'); ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.translate(c…

キャンバスで遊び中 - テキスト表示 - fujidigの雑記 でつかった http://www.fujidig.com/2008/06/images/chars.png の画像を作るときに使った。 buffer 1 FAMILY = "VL ゴシック" SIZE = 128 font FAMILY, SIZE pos 32000 : mes " " W = ginfo_mesx H = gin…

ゆの in language （ってキーワード書くと捕捉してもらえるかな＞＜ はてなブックマーク - ゆの in languageに関するcho45のブックマーク ゆの in languageとは - はてなキーワード if 0 { #defcfunc _X if i : s + "×365 " : else : s = "ひだまり" : i+ re…

賢い！