HTML Canvas and OO Javascript

Publish in

Documents

51 views

Please download to get full document.

View again

of 16
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Share
Description
HTML Canvas and OO Javascript. This lecture is based on materials from: Eloquent JavaScript A Modern Introduction to Programming by Marijn Haverbeke HTML5: The Missing Manual The Book That Should Have Been in the Box Matthew MacDonald O'Reilly Media. Canvas. A drawing surface. Example.
Transcript
HTML Canvas and OO Javascript
  • This lecture is based on materials from:
  • Eloquent JavaScript
  • A Modern Introduction to Programming
  • by MarijnHaverbeke
  • HTML5: The Missing Manual
  • The Book That Should Have Been in the Box
  • Matthew MacDonald
  • O'Reilly Media
  • Canvas
  • A drawing surface
  • Example Transforms
  • Shifts the canvas’ coordinate system
  • Functions:
  • translate(x,y)
  • rotate(angle)
  • scale(w,h)
  • transform()
  • save()
  • restore()
  • Drawing Images Step1: Load image into <img> tag Step2: Paint image on canvas canvas.drawImage(img,x,y); Caveat: step 2 should run only after image has been loaded Gradients and Bezier Curves Radial Gradients http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-transformations-and-gradients/ Arrays var a = new Array(); // empty array varb = new Array(“dog”, 3, 8.4); varc = [2, 5, ‘a’, ‘b’]; c[15] = “hello”; // implicit extension Properties:
  • length
  • join()
  • reverse()
  • sort()
  • concat()
  • slice()
  • splice()
  • push() / pop()
  • shift() / unshift()
  • toString()
  • Objects
  • Collection of properties and methods
  • Creation
  • var empty = {};
  • var cat = {color: “gray”, name: “Spots”};
  • Adding properties/methods
  • cat.age = 10;
  • cat.talk = function () { console.log(“Cats don’t talk!”);}
  • Deleting properties/methods
  • delete cat.age;
  • Object Constructors
  • Any function can become an object constructor
  • Instantiate an object by calling new on the function. function Rectangle(w,h) { this.width = w; this.height = h; this.area = function () { return this.width * this.height; }; } varrec = new Rectangle(2,4); rec.area(); rec[“area”](); rec.newFunction = newPredecleredFunc;
  • Interactive Circles Method and Property Types
  • Private variables
  • Private functions
  • Privileged methods
  • Public properties
  • Public methods
  • Prototype properties
  • Prototype methods
  • Static properties
  • Prototype
  • Javascript does not have a class construct
  • Every object has a prototype property
  • Use prototype to change type-wide definition
  • Privileged vs. Prototype
  • Prototype methods
  • are static
  • one single instance shared among all definitions
  • Privileged methods
  • recreated for each object
  • can access private data.
  • Inheritance
  • Inherit by setting prototype to instance ofparent object
  • Calling parent constructor
  • Parent.call(this, args….);
  • Interactive Shapes
    Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks