HTML5のキャンバスにタイマーを使って描画を行います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | <!DOCTYPE html> < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> < title >タイマーによる描画</ title > < script type = "text/javascript" > var canvasWidth; var canvasHeight; var context; // イメージ01 var img01 = new Image(); img01.src = "./img/icon.png"; // イメージ02 var img02 = new Image(); img02.src = "./img/hidekiti.png"; // イメージ番号 var imgNum = 0; /* タイマー */ function OnTimer() { var posX = Math.random() * canvasWidth; var posY = Math.random() * canvasHeight; var imgNum = 1 + parseInt(Math.random() * 28 + 0.5); // 拡大率 var zoom = 1 + Math.random() * 2; var imgX = parseInt(imgNum % 10) * 16; var imgY = parseInt(imgNum / 10) * 16 + 16; var imgW = 16; var imgH = 16; var img = img01; var imgDrawW = imgW * zoom; var imgDrawH = imgH * zoom; var imgPosX = posX - imgDrawW / 2; var imgPosY = posY - imgDrawH / 2; // イメージの描画 context.drawImage( img , imgX // 画像上の描画開始位置X , imgY // 画像上の描画開始位置Y , imgW // 描画する画像の幅 , imgH // 描画する画像の高さ , imgPosX // 描画位置X , imgPosY // 描画位置Y , imgDrawW // 描画幅 , imgDrawH // 描画高さ ); } /* ページロード完了 */ function OnLoad() { // キャンバス取得 var canvas = document.getElementById("canvas"); // キャンバスの幅と高さを取得 canvasWidth = canvas.getAttribute("width"); canvasHeight = canvas.getAttribute("height"); console.log("width = " + canvasWidth); console.log("height = " + canvasHeight); // キャンバスへ描画 context = canvas.getContext('2d'); context.fillStyle = 'white'; context.fillRect(0, 0, canvasWidth, canvasHeight); // 中心 var centerX = canvasWidth / 2; var centerY = canvasHeight / 2; // タイマー開始 var timer1 = setInterval("OnTimer()", 1000); // マウスイベントを受け取る canvas.addEventListener( "mousedown", function (e) { var posX; var posY; /* FireFoxの場合は、offsetXとoffsetYがundefinedになる */ posX = (e.offsetX !== undefined) ? e.offsetX : (e.layerX - e.target.offsetLeft); posY = (e.offsetY !== undefined) ? e.offsetY : (e.layerY - e.target.offsetTop); console.log("x = " + posX); console.log("y = " + posY); }); } </ script > </ head > < body bgcolor = "#c0c0ff" onload = "OnLoad()" > < h1 >タイマーによる描画</ h1 > < canvas width = "300" height = "200" id = "canvas" style = "background-color:black;" ></ canvas > < br /> タイマーで定期的にランダムな位置に画像を色々な大きさで描画します。 < br /> < a href = "../html5_list.html" >戻る</ a > </ body > </ html > |