とにかく疲れた。それに付きっ切り。
仕事とはいえ、司会でも疲れた。
そして腰は、治る気配を見せない。
>「ドラッグ」と「ドラッグ＆ドロップ」は別にした方が良いように思い始めています。「ドラッグ」の本質は「移動」であり、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>
その２
<!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 さんとか好きそう？！
ところで、皆さんのパソコンってどれぐらいの性能なのでしょう？
あまりにも速いマシンでは、効率の悪いコードでも、そこそこ速くなるので、普段は遅いマシンで作業しているとか？
その３、ダイヤモンドなんとか（ｎ角形の対角線を描く）
<!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>
