【HTML5・javascript】canvasにcanvas要素を追加することで、自由に四角を描く
【今回の紹介】
掲題の通りです。
【内容】
以下の理由で、canvas要素を追加することで、自由に四角を描くサンプルを作成しました
①bodyに大きなcanvasを生成して、四角を描くサンプルなどはたくさんありますが
canvasを追加していくというサンプルがなかったこと
②今後、一つ一つのcanvasobjにプロパティとメソッドを持たせたかったこと
処理の流れとしては、
①マウス押下時に座標を取得する
②マウスを離した時の座標を取得する
③①と②座標を取得する
④①の座標を四角の絶対位置(描画開始位置)とする
⑤①の描画開始位置と②の描画終了位置で四角を描く
※canvasの四角を描くときは、開始位置が(0、0)になるため、計算に注意する
⑥もし、開始終了位置が負の数ならば、終了座標を開始座標に、開始座標を終了座標とする
【参考ソース】
<html> <head> <meta charset='utf-8'> </head> <title>HTML5</title> <body id='body'> <div id='div' style="width=800;height=800;"></div> <script> startX=0; startY=0; mousedown=false; window.onload=function(){ canvas=$('body'); } body.onmousedown = function(e){ startX=e.pageX; startY=e.pageY; mousedown=true; } body.onmouseup =function(e){ var endX=e.pageX; var endY=e.pageY; draw(endX,endY); mousedown=false; } function draw(x,y){ var canvas=document.createElement("canvas"); canvas.style.backgroundColor = "#eeffee"; // キャンバスの背景色 canvas.width=Math.abs(x-startX); canvas.height=Math.abs(y-startY); canvas.style.position="absolute"; var context=canvas.getContext('2d'); //描画する四角の座標(mouseup後の座標)がマイナスの時野判定を行う if(x-startX>0 && y-startY>0) { canvas.style.top=startY; canvas.style.left=startX; body.appendChild(canvas); console.log(startX,startY,x-startX,y-startY); } else{ canvas.style.top=y; canvas.style.left=x; body.appendChild(canvas); } } function $(id){ return document.getElementById(id); }