summaryrefslogtreecommitdiff
path: root/book/src/main/scalatex/handson/CanvasApp.scalatex
diff options
context:
space:
mode:
authorLi Haoyi <haoyi@dropbox.com>2015-03-28 22:16:57 +0800
committerLi Haoyi <haoyi@dropbox.com>2015-03-28 22:16:57 +0800
commit1ac4a2594bf2ebe1fc80b93f1208343653892517 (patch)
tree7f07cee1d4e6a608853c6f862550675165b78dfb /book/src/main/scalatex/handson/CanvasApp.scalatex
parent7006cebd061784900233c405ce03665151b86010 (diff)
downloadhands-on-scala-js-1ac4a2594bf2ebe1fc80b93f1208343653892517.tar.gz
hands-on-scala-js-1ac4a2594bf2ebe1fc80b93f1208343653892517.tar.bz2
hands-on-scala-js-1ac4a2594bf2ebe1fc80b93f1208343653892517.zip
scalatex 0.2.1
Diffstat (limited to 'book/src/main/scalatex/handson/CanvasApp.scalatex')
-rw-r--r--book/src/main/scalatex/handson/CanvasApp.scalatex10
1 files changed, 5 insertions, 5 deletions
diff --git a/book/src/main/scalatex/handson/CanvasApp.scalatex b/book/src/main/scalatex/handson/CanvasApp.scalatex
index d008508..c485610 100644
--- a/book/src/main/scalatex/handson/CanvasApp.scalatex
+++ b/book/src/main/scalatex/handson/CanvasApp.scalatex
@@ -35,7 +35,7 @@
@hl.ref(canvasapp/"ScratchPad.scala", "/*code*/")
@less
- @BookData.example(canvas, "canvasapp.ScratchPad().main")
+ @book.BookData.example(canvas, "canvasapp.ScratchPad().main")
@p
This code sets up the @lnk.dom.mousedown and @lnk.dom.mouseup events to keep track of whether or not the mouse has currently been clicked. It then draws black squares any time you move the mouse while the button is down. This lets you basically click-and-drag to draw pictures on the canvas. Try it out!
@@ -69,7 +69,7 @@
@hl.ref(canvasapp/"Clock.scala", "/*code*/")
@less
- @BookData.example(canvas, "canvasapp.Clock().main")
+ @book.BookData.example(canvas, "canvasapp.Clock().main")
@p
As you can see, we're using more @lnk("Canvas APIs", "https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D"), in this case dealing with rendering text on the canvas. Another thing we're using is the Javascript @lnk("Date", "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date") class, in Scala.js under the full name @hl.scala{scala.scalajs.js.Date}, here imported as @hl.scala{js.Date}. Again, click on the link @i(cls:="fa fa-link ") icon to view the full-code if you're having trouble here.
@@ -151,7 +151,7 @@
At almost 100 lines of code, this is quite a meaty example! Nonetheless, when all is said and done, you will find that the example actually works! Try it out!
@div
- @BookData.example(canvas, "canvasapp.FlappyLine().main")
+ @book.BookData.example(canvas, "canvasapp.FlappyLine().main")
@sect{Canvas Recap}
@p
@@ -180,9 +180,9 @@
@li
@hl.scala{renderer} is a Javascript @lnk.dom.CanvasRenderingContext2D, and all the methods on it are Javascript method calls directly on the Javascript object
@li
- @hl.scala{frame} is a Scala @hl.scala{Int}, and obeys Scala semantics, though it is implemented as a Javascript @hl.javascript{Number} under the hood.
+ @hl.scala{frame} is a Scala @hl.scala{Int}, and obeys Scala semantics, though it is implemented as a Javascript @hl.js{Number} under the hood.
@li
- @hl.scala{playerY} and @hl.scala{playerV} are Scala @hl.scala{Double}s, implemented directly as Javascript @hl.javascript{Number}s
+ @hl.scala{playerY} and @hl.scala{playerV} are Scala @hl.scala{Double}s, implemented directly as Javascript @hl.js{Number}s
@p
This reveals something pretty interesting about Scala.js: even though Scala at-first-glance is a very different language from Javascript, the interoperation with Javascript is so seamless that you can't even tell from the code which values/methods are defined in Scala and which values/methods come from Javascript!