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>
のように記述して下さい。