【canvas】マウスの座標を調べる【HTML5】 augie_augie Follow 2011-10-04 13:09:28 License: MIT License Fork0 Fav0 View556 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 43 lines HTML 1 lines CSS 1 lines 【canvas】マウスの座標を調べる【HTML5】 var canvas = document.getElementById('world'); var width = canvas.getAttribute('width'); var height = canvas.getAttribute('height'); var cInfo = { width: width, height: height }; var mouseX; var mouseY; onload = function() { if(canvas && canvas.getContext) { var ctx = canvas.getContext('2d'); drawInit(); canvas.onmousemove = mouseMoveListener; } function mouseMoveListener(e) { drawInit(); //座標調整 adjustXY(e); //テキストの描画 ctx.globalAlpha = 1; ctx.fillStyle = "#666666"; ctx.fillText("X座標：" + mouseX, 5, 12); ctx.fillText("Y座標：" + mouseY, 5, 24); ctx.fillStyle = "rgb(255, 0, 0)"; ctx.fillRect(mouseX-3, mouseY-3, 5, 5); } function adjustXY(e) { var rect = e.target.getBoundingClientRect(); mouseX = e.clientX - rect.left; mouseY = e.clientY - rect.top; } function drawInit() { ctx.beginPath(); ctx.fillStyle = "rgb(255, 255, 255)"; ctx.fillRect(1, 1, (width-2), (height-2)); ctx.strokeRect(0, 0, cInfo.width, cInfo.height); } }; <canvas id='world' width='400' height='400'></canvas> 【canvas】マウスの座標を調べる【HTML5】 body { background-color: #DDDDDD; font: 30px sans-serif; } var canvas = document.getElementById('world'); var width = canvas.getAttribute('width'); var height = canvas.getAttribute('height'); var cInfo = { width: width, height: height }; var mouseX; var mouseY; onload = function() { if(canvas && canvas.getContext) { var ctx = canvas.getContext('2d'); drawInit(); canvas.onmousemove = mouseMoveListener; } function mouseMoveListener(e) { drawInit(); //座標調整 adjustXY(e); //テキストの描画 ctx.globalAlpha = 1; ctx.fillStyle = "#666666"; ctx.fillText("X座標：" + mouseX, 5, 12); ctx.fillText("Y座標：" + mouseY, 5, 24); ctx.fillStyle = "rgb(255, 0, 0)"; ctx.fillRect(mouseX-3, mouseY-3, 5, 5); } function adjustXY(e) { var rect = e.target.getBoundingClientRect(); mouseX = e.clientX - rect.left; mouseY = e.clientY - rect.top; } function drawInit() { ctx.beginPath(); ctx.fillStyle = "rgb(255, 255, 255)"; ctx.fillRect(1, 1, (width-2), (height-2)); ctx.strokeRect(0, 0, cInfo.width, cInfo.height); } }; <canvas id='world' width='400' height='400'></canvas> body { background-color: #DDDDDD; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/9dFp/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/augie_augie/9dFp" title="【canvas】マウスの座標を調べる【HTML5】">【canvas】マウスの座標を調べる【HTML5】 - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter
