はてなブログで JavaScript を使ってみるテスト(その2)
はてなブログ内で HTML5 + Canvas が使えるかのテスト。
ソース
<canvas id="world-20130911-001" width="440" height="440"></canvas> <script type="text/javascript"> var X_MAX = 440; var Y_MAX = 440; var R = 220; function draw() { var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); drawScreen( ctx ); drawGraph( ctx ); drawSin( ctx ); } function drawScreen( ctx ) { ctx.fillStyle = "rgb( 0, 0, 0 )"; ctx.fillRect( 0, 0, X_MAX, Y_MAX ); } function drawGraph( ctx ) { ctx.strokeStyle = "rgb( 0, 127, 0 )"; ctx.beginPath(); var x, y; for (x = 0; x <= X_MAX; x += 20) { ctx.moveTo(x, 0); ctx.lineTo(x, Y_MAX); } for (y = 0; y <= Y_MAX; y += 20) { ctx.moveTo(0, y); ctx.lineTo(X_MAX, y); } ctx.stroke(); } function drawSin( ctx ) { ctx.strokeStyle = "rgb( 0, 255, 0 )"; ctx.beginPath(); ctx.moveTo(0, R); var x, y; for (x = 0; x <= X_MAX; x += 20) { y = R - R * Math.sin( 2 * Math.PI * ( x / X_MAX ) ) ctx.lineTo(x, y); } ctx.stroke(); } draw(); </script>