CoffeeScript の練習
ここで作った JavaScript のプログラムを、CoffeeScript で描き直してみました。onload や onclick のやり方がわからず、結構苦労しました。どうも jQuery でやるしかないみたいです。HTML はおおよそ同じなので、CoffeeScript の部分だけ載せます。
cvs = td = cw = ch = null $(window).load -> cvs = document.getElementById("Canvas") td = cvs.getContext("2d") cw = cvs.width; ch = cvs.height $(cvs).click -> main() main = -> cx = cvs.offsetLeft; cy = cvs.offsetTop x1 = event.x; y1 = event.y td.beginPath() td.fillStyle = "rgb(" + rnd() + "," + rnd() + "," + rnd() + ")" td.arc(x1 - cx, y1 - cy, 25, 0, Math.PI * 2) td.fill() rnd = -> String(Math.floor(Math.random()*256)) cvsClear = -> td.clearRect(0, 0, cw, ch)
HTML は、head の部分に
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>
だけ追加しておいて下さい。また、CoffeeScript のコードは
<script type="text/coffeescript"> .....コード..... </script> のように記述して下さい。