canvas要素で遊んでいる
canvas要素を使ってみたくてとりあえず画像がウロウロするスクリプトを書いてみた
実行してみる
window.onload = function(){ var canvas = document.createElement('canvas'); canvas.width = '1000', canvas.height = '250'; document.getElementById('content').appendChild(canvas); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = 'http://ec3.images-amazon.com/images/I/416FBSMR24L._SL500_SS75_.jpg'; var x = 0, y = 0; var y_range = 20; var count = 0, max_count = 15; img.onload = function(){ ctx.drawImage(img, 0, 0); var increment = {x: 5, y: 10}; (function(){ if(count > max_count){ return; } if(y < -y_range || y_range < y){ increment['y'] = (-increment['y']); } ['x', 'y'].map(function(k){ eval(k + " += increment['" + k + "']"); }); ctx.clearRect(0, 0, img.width, img.height); ctx.translate(x, y); ctx.drawImage(img, 0, 0); count += 1; setTimeout(arguments.callee, 100); })(); }; };
firefox 3.5.5でしか検証してないのでその他のブラウザで動くかは不明。
動いたブラウザをコメントで報告していただけるとうれしいです。