few lessons learnt:
var b = new B(); // create instance. BUT instantiation MUST be after the class declaration. debugged for a long time.
- <script /> is not valid. must use closing tag </script>
- made a simple mistake and debug like crazy:
canvas = document.getElementById("test");
context = canvas.getContext("2d");context.fillStyle("#FF0000");//SHOULD have been context.fillStyle = "#FF0000";
context.fillRect( 10, 20, 100, 50);
More canvas reference: http://www.w3schools.com/html5/html5_ref_canvas.asp - must use addEventListener for mouse input: canvas.addEventListener("mousedown", mDown, false);
- cannot get mouse (x,y) relative to canvas top left (0,0) so must manually calculate:
var mouseX = (e.pageX -canvas.offsetLeft );
var mouseY = (e.pageY -canvas.offsetTop); - OOP
function A() // create a class
{
this.v = 1; // fields or variables
this.name = "haha";
}
A.prototype.constructor = A;
A.prototype.m1 = function(){ // methods
this.v++;
}
A.prototype.m2 = function(){
this.v+=10;
}
// new class
B.prototype.constructor = B;
function B(){
A.call(this); // call super class constructor if necessary
this.x = 2;
}
B.prototype.m2 = function()
{
A.prototype.m2.call(this); // call super class method if necessary
// do additional stuff
}
var b = new B(); // create instance. BUT instantiation MUST be after the class declaration. debugged for a long time.
.png)
