Initial work on HTML5 library

2012-01-06 13:51:33 -05:00 · 2012-01-06 13:51:33 -05:00 · 78f82c39f7
parent 96b1480063
commit 78f82c39f7
1 changed files with 113 additions and 0 deletions
--- a/base.js
+++ b/base.js
@ -0,0 +1,113 @@
+<html>
+<head>
+</head>
+<body>
+<canvas id="canvas" width=500 height=500></canvas>
+<script>
+//--------------------------  BEGIN JAVASCRIPT  --------------------------------\\
+
+
+function MovieClip() {
+	/* From the ActionScript reference:
+	
+	You do not use a constructor method to create a movie clip. You can choose from among
+	three methods to create movie clip instances:
+
+	The attachMovie() method allows you to create a movie clip instance based on a movie 
+	clip symbol that exists in the library.
+	The createEmptyMovieClip() method allows you to create an empty movie clip instance as
+	a child based on another movie clip.
+	The duplicateMovieClip() method allows you to create a movie clip instance based on 
+	another movie clip.
+	*/
+	this._frames = [[]]
+	this._currentframe = 1;
+	this._draw = function (cr) {
+		for (i in this) {
+			if (this._frames[this._currentframe-1][i]) {
+				this[i]._draw(cr, this._frames[this._currentframe-1][i]);
+			}
+		}
+	}
+}
+
+function Shape() {
+	// Not part of the ActionScript spec, but necessary.
+	this._shapedata = []
+	this.fill = "#000000"
+	this._draw = function (cr, frame) {
+		this._x = frame._x
+		this._y = frame._y
+		this._xscale = frame._xscale
+		this._yscale = frame._yscale
+		this._rotation = frame._rotation
+		cr.save()
+		cr.translate(this._x,this._y)
+		cr.rotate(this._rotation*Math.PI/180)
+		cr.scale(this._xscale*1.0, this._yscale*1.0)
+		cr.fillStyle = this.fill;
+		for (i in this._shapedata) {
+			if (this._shapedata[i][0]=="M") {
+				cr.moveTo(this._shapedata[i][1],this._shapedata[i][2])
+			} else if (this._shapedata[i][0]=="L") {
+				cr.lineTo(this._shapedata[i][1],this._shapedata[i][2])
+			} else if (this._shapedata[i][0]=="C") {
+				cr.bezierCurveTo(this._shapedata[i][1],this._shapedata[i][2],this._shapedata[i][3],this._shapedata[i][4],this._shapedata[i][5],this._shapedata[i][6])
+			}
+		}
+		if (self.filled) {
+			cr.stroke()
+			cr.fill()
+		} else {
+			cr.stroke()
+		}
+		cr.restore()
+	}
+}
+
+var Stage = {
+	
+}
+
+var root = {}
+
+function draw() {
+	var canvas = document.getElementById("canvas");
+
+	if (canvas.getContext) {
+		var cr = canvas.getContext("2d");
+		
+		cr.strokeSyle = "#0000FF"
+		
+		for (i in root) {
+			if (root[i]._draw) {
+				root[i]._draw(cr)
+			}
+		}
+	}
+}
+
+var a = new Shape()
+a._shapedata = [["M",0,0],["L",400,0],["L",400,200],["L",0,200],["L",0,0]]
+var b = new MovieClip()
+b.a = a
+b._frames[0].a = {}
+b._frames[0].a._x = 100
+b._frames[0].a._y = 20
+b._frames[0].a._xscale = 1
+b._frames[0].a._xscale = 1
+b._frames[0].a._rotation = 0
+root.b = b
+draw()
+b._frames[0].a = {}
+b._frames[0].a._x = 50
+b._frames[0].a._y = 40
+b._frames[0].a._xscale = 1
+b._frames[0].a._xscale = 1
+b._frames[0].a._rotation = 0
+draw()
+
+//-------------------  END OF JAVASCRIPT ------------------------\\
+</script>
+</body>
+</html>