Drkcore

16 09 2011 javascript coffeescript Tweet

HTML5 Canvasを読み始めた

600ページ超の熱い本だが、一通りきちんとコードを追いかけようと。

ProductName HTML5 Canvas: Native Interactivity and Animation for the Web
Steve Fulton
Oreilly & Associates Inc / 2922円 ( 2011-05-13 )


ただ写経するだけではつまらないので、coffeescriptで書いていくことにする。

class Debugger
  log: (message) ->
    try
      console.log(message)
    catch exception
      return

canvasSupport = -> Modernizr.canvas

canvasApp = ->
  return if !canvasSupport()

  theCanvas = document.getElementById("canvasOne")
  context = theCanvas.getContext("2d")

  d.log("Drawing Canvas")

  drawScreen = ->
    context.fillStyle = "#ffffaa"
    context.fillRect(0, 0, 500, 300)
    context.fillStyle = "#000000"
    context.font = "20px _sans"
    context.textBaseline = "top"
    context.fillText("Hello World!", 195, 80)

    context.strokeStyle = "#000000"
    context.strokeRect(5, 5, 490, 290)

  drawScreen()

d = new Debugger
canvasApp()

Express+jade+CoffeeScriptという構成で書いてみている。 コードはGitHubに置いてある。

About

  • もう5年目(wishlistありマス♡)
  • 最近はPythonとDeepLearning
  • 日本酒自粛中
  • ドラムンベースからミニマルまで
  • ポケモンGOゆるめ

Tag

Python Deep Learning javascript chemoinformatics Emacs sake and more...

Ad

© kzfm 2003-2021