読者です 読者をやめる 読者になる 読者になる

HTML5 の Canvas でしょうもないものを作った

こちら。前回のエントリと同じものを、HTML5Canvas で作ってみました。マウスでクリックしたところに円を描きます。ランダムな色がちょっとキレイかな。
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 がシンプルに書けるかがわかる。

追記:
続編はこちらです。