Canvasを使って図形を描く
Canvasとは
ブラウザ上にJavaScriptで図形を表現する技術。
GIFやJPEGなどの画像やFlashやJavaなどのプラグインを使う必要がありません。
【参考】Canvasとは
http://www.html5.jp/canvas/what.html
Canvasのサンプルソース
では、実際にCanvasを使って図形を描いてみましょう。
図形を描写ボタンをクリックすると、Canvasで図形を描きます。
■HTML
|
1 2 3 |
<button onclick="init()">図形を描写</button></br> <button onclick="clear()">図形を消去</button></br> <canvas id ="canvas" width="600" height="400"></canvas> |
■JavaScript
|
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 |
<script> <!-- var flg flg = 0; var ctx; function init() { if ( flg == 0 ) { var canvas = document.getElementById("canvas"); //canvas要素の取得 ctx = canvas.getContext("2d"); //コンテキストの取得 ctx.strokeStyle = "#00DD00";//線の色 ctx.fillStyle = "#007700";//塗りつぶしの色 ctx.lineWidth = 10;//線の太さ ctx.lineCap = "butt";//線の先端の処理 ctx.shadowColor = "#003300";//影の色 ctx.shadowBlur = 50;//影の範囲 //線を引く ctx.beginPath(); //座標の初期化 ctx.moveTo(100, 100); //座標の移動 ctx.lineTo(300, 150); //線を引く ctx.stroke(); //線を表示する //矩形を書く ctx.fillRect(100,200,200,100); //矩形を描く(線のみ) ctx.strokeRect(100,200,200,100);//矩形を描く(塗りつぶしのみ) //三角形を描く ctx.beginPath(); fillStyle = "#FFFF00"; ctx.moveTo(400,100); ctx.lineTo(450,50); ctx.lineTo(500,100); ctx.closePath(); ctx.stroke(); ctx.fill(); flg = 1; } else { window.confirm("既に描写済みです。"); } } function clear() { var canvas = document.getElementById("canvas"); //canvas要素の取得 ctx = canvas.getContext("2d"); //コンテキストの取得 ctx.clearRect(0,0,600,400); //(x座標, y座標, width, height) flg = 0; } //--> </script> |
これだけだと大した機能には見えないかもしれませんが、頑張ればこんなのもできるみたいです。
 |
