21.html5 JavaScriptを埋め込むCanvas描画 Chap 8-3
学習書の「sample_a」(Chap8_3)を表示しソースコードを見て下さい。
JavaScriptでビットマップ形式の図形を描画する
Canvasを利用することで、下図のような円を描画することが出来る。Canvasは、JavaScriptでビットマップタイプの図形を描画できる。
HTML5への組込記述(描画領域の確保)
1 |
<canvas id="circle" width="28" height="28"></canvas> |
HTML5への組込記述(描画するJavaScriptの組込)
1 2 3 4 5 6 7 8 9 10 11 |
<script> function myimage() { var canvas = document.getElementById('circle'); if(canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.arc(14,14,14,0,Math.PI*2,true); ctx.fillStyle = "#" + Math.floor(Math.random()*256*256*256).toString(16); ctx.fill(); } } </script> |
HTML5への組込記述(HP読み込み時JavaScriptの実行)
1 |
<body onLoad="myimage()"> |