【HTML5・javascript】canvasにマウスで四角を描く
【今回の紹介】
掲題のものを作ったので、メモしときます。
【内容】
シンプルな作りです。
以下のイベントのときの座標をとって描画しています。
・マウスを押下したとき
・マウスを離したとき
【参考ソース】
<html> <head> <meta charset='utf-8'> </head> <title>HTML5</title> <body> <canvas id='canvas'></canvas> <script> startX=0; startY=0; window.onload=function(){ canvas=$('canvas'); expandCanvas(); } function expandCanvas(){ var b = document.body; var d = document.documentElement; canvas.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth); canvas.height = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight); } canvas.onmousedown = function(e){ startX=e.pageX; startY=e.pageY; } canvas.onmouseup =function(e){ var endX=e.pageX; var endY=e.pageY; draw(endX,endY); } function draw(x,y){ console.log(canvas); var context=canvas.getContext('2d'); context.strokeStyle='#FFFF00'; context.strokeRect(startX,startY,x-startX,y-startY); } function $(id){ return document.getElementById(id); } </script> </body> </html>