HTML5 の Canvas でしょうもないものを作った
こちら。前回のエントリと同じものを、HTML5 の Canvas で作ってみました。マウスでクリックしたところに円を描きます。ランダムな色がちょっとキレイかな。
canvas_sample1.html
<!DOCTYPE html> <html lang="ja"> <head> <script type="text/javascript" src="canvas_sample1.js"></script> <style type="text/css"> body {background-color: lightskyblue;} canvas {background-color: white; display: block; margin-left: auto; margin-right: auto; margin-top: 20px;} div.ms {text-align: center;} </style> </head> <body> <canvas id="Canvas" width="550" height="550"></canvas> <br><br> <div class="ms" style="color: blue;">クリックして下さい</div> <br><br> <form> <div class="ms"><input type="button" value="消去" onclick="cvsClear();"></div> </form> </body> </html>
canvas_sample1.js
var cvs, td, cx, cy, cw, ch; onload = function() { cvs = document.getElementById("Canvas"); td = cvs.getContext("2d"); cw = cvs.width; ch = cvs.height; cx = cvs.offsetLeft; cy = cvs.offsetTop; cvs.onclick = main; } function main(e) { var x1, y1; x1 = e.pageX; y1 = e.pageY; td.beginPath(); td.fillStyle = "rgb(" + rnd() + "," + rnd() + "," + rnd() + ")"; td.arc(x1 - cx, y1 - cy, 25, 0, Math.PI * 2); td.fill(); } function rnd() { return String(Math.floor(Math.random()*256)); } function cvsClear() { td.clearRect(0, 0, cw, ch); }
Canvas の使い方がよくわからなくて、たったこれだけ書くのに試行錯誤した。わかりやすい本とかないのかな。例えば fillStyle の色の指定だけれど、赤なら "rgb(255, 0, 0)" とすればいいわけだが、まさか文字列で指定するとは思わなかった。それから、円を描くときは fill() でやらないと、円周が描かれるだけになってしまう。Canvas の座標は画面の座標とはちがう。等等。
それにしても Ruby で書いたのは実質 10行以下だから、いかに Ruby がシンプルに書けるかがわかる。
追記:
続編はこちらです。