取引先の社長のお葬式が、やっと終わった。
とにかく疲れた。それに付きっ切り。
仕事とはいえ、司会でも疲れた。
そして腰は、治る気配を見せない。
>「ドラッグ」と「ドラッグ&ドロップ」は別にした方が良いように思い始めています。「ドラッグ」の本質は「移動」であり、mousedown-move-up と keydown で十分ですが、「ドロップ」の本質は「メニュー」ですので、drop とメニュー操作が必要、という違いがある気がしてきました。いかがでしょう。
またもや、今の技量では、到底 語ることもできません。残念!
http://oshiete.goo.ne.jp/qa/6880863.html
「リッチなテーブル」ってどんだけ〜?欲深いなぁ
だまってエクセルでいいじゃん。
高校生のころに描いていたコンピュータ・グラフィックス(?)
いまさら、canvas の勉強?!
canvas の描画は、あの当時から比べると速すぎる。遅くするはめになるとは・・・
そういえば、MZ-80Bは、グリーンモニターだった。
<!DOCTYPE html> <title></title> <canvas width="640" height="400"></canvas> <script type="application/javascript; version=1.8"> (function (canvas) { if ((! canvas) || (! canvas.getContext)) return false; var ctx = canvas.getContext ('2d'); if (! ctx) return false; var draw = function () { var deg = Math.PI / 180; var x, y; for (var i = 3; i < 10 ; i++) { ctx.strokeStyle = ['','','','blue', '#f0f', '#f00', '#0f0', '#0ff', '#ff0', 'white'][i]; ctx.fillStyle = 'black'; ctx.fillRect (0, 0, 640, 400); for (var j = 0; j < 200; j += 5) { ctx.beginPath (); for (var k = j, K = k + 360; k < K; k += 360 / i) { x = 320 + Math.sin (k * deg) * j; y = 200 - Math.cos (k * deg) * j; if (k == j) ctx.moveTo (x, y); else ctx.lineTo (x,y) } ctx.closePath (); ctx.stroke (); yield true; } } }(); function fuga () { if (draw.next ()) setTimeout (arguments.callee, 30); } fuga (); })(document.querySelector ('canvas')); </script>
その2
<!DOCTYPE html> <title></title> <canvas width="640" height="500"></canvas> <script type="application/javascript; version=1.8"> (function (canvas) { if ((! canvas) || (! canvas.getContext)) return false; var ctx = canvas.getContext ('2d'); if (! ctx) return false; var draw = function () { var deg = Math.PI / 250; var x, y, s; var max = []; var min = []; ctx.fillStyle = 'black'; ctx.fillRect (0, 0, 640, 500); ctx.fillStyle = ['black', 'blue', '#f0f', '#f00', '#0f0', '#0ff', '#ff0', 'white'][1]; for (var i = 0; i <= 500; i += 1) { s = (i % 10) ? 10: 1; for (var j = 0; j <= 500; j+= s) { x = (i / 3 + j) |0; y = 250 + Math.pow (Math.sin (j * deg) * Math.sin (i * deg), 5) * 200 - i / 5 + j / 5; if ('undefined' === typeof min[x] || min[x] > y) { ctx.fillRect (x,y,1,1); min[x] = y; } if ('undefined' === typeof max[x] || max[x] < y) { ctx.fillRect (x,y,1,1); max[x] = y; } yield true; } } }(); function fuga () { if (draw.next ()) setTimeout (arguments.callee, 1); } fuga (); })(document.querySelector ('canvas')); </script>
なつかしい・・・。
それにしても、yield true; が無いと、一瞬で終わるのね。それにしても速い!
Fujillin さんとか好きそう?!
ところで、皆さんのパソコンってどれぐらいの性能なのでしょう?
あまりにも速いマシンでは、効率の悪いコードでも、そこそこ速くなるので、普段は遅いマシンで作業しているとか?
その3、ダイヤモンドなんとか(n角形の対角線を描く)
<!DOCTYPE html> <title></title> <meta charset="UTF-8"> <style> body { background:#000} </style> <canvas width="600" height="600"></canvas> <script type="application/javascript; version=1.8"> window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame|| window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setInterval (callback, 1000 / 60); }; })(); function demo () { var canvas = document.querySelector ('canvas'); if ((! canvas) || (! canvas.getContext)) return false; var ctx = canvas.getContext ('2d'); if (! ctx) return false; var n = 3; var x = [], y = []; var r = 300; var d = Math.PI / 180; var draw = function () { while (n < 60) { for (var i = 0; i < n; i += 1) { x[i] = 300 + Math.sin (360 / n * i * d) * r; y[i] = 300 - Math.cos (360 / n * i * d) * r; } ctx.fillStyle = 'black'; ctx.fillRect (0, 0, 601, 601); ctx.strokeStyle = ['blue', '#f0f', '#f00', '#0f0', '#0ff', '#ff0', 'white'][n%7]; for (var i = 0; i < n - 1; i += 1) { for (var j = i + 1; j < n; j += 1) { ctx.beginPath (); ctx.moveTo (x[i], y[i]); ctx.lineTo (x[j], y[j]); ctx.closePath (); ctx.stroke (); yield 1; } } yield 2; n += 1; } }(); function animationLoop () { switch (draw.next ()) { case 1: requestAnimationFrame (arguments.callee); break; case 2: setTimeout (arguments.callee, 2000) } } animationLoop (); } demo (); </script>