/** * JS3 - A Drawing & Tweening API for the JavaScript Canvas * Version : 0.4.0 * Release Date : November 21 2015 * Documentation : http://js3.braitsch.io/ * * Copyright 2012-2015 Stephen Braitsch :: @braitsch * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 **/ function JS3(cnvs) { var _root = this; var _canvas = document.getElementById(cnvs); var _context = _canvas.getContext("2d"); var _children = []; var _graphics = []; var _runners = []; var _tweens = []; var _drawClean = true; var _background = '#ffffff'; var _winTitle = 'My Canvas'; var _clickInt = 0; var _mouseOver = false; var _interactive = false; var _downObj, _overObj, _dragObj, _radial, _linear; // public getters & setters // Object.defineProperty(this, "width", {get: function() {return _canvas.width;}}); Object.defineProperty(this, "height", {get: function() {return _canvas.height;}}); Object.defineProperty(this, "numChildren", {get: function() {return _children.length;}}); Object.defineProperty(this, "mousePressed", {get: function() {return _downObj!=null;}}); Object.defineProperty(this, "interactive", { get: function() {return _interactive;}, set: function(b) { _interactive = b; b ? addMouseEvents() : remMouseEvents();} }); Object.defineProperty(this, "position", {get: function() { var x = 0; var y = 0; var e = _canvas; while( e != null ) { x += e.offsetLeft; y += e.offsetTop; e = e.offsetParent; } return {x:x, y:y};}}); Object.defineProperty(this, "drawClean", {set: function(b) { _drawClean = b;}}); Object.defineProperty(this, "radial", {set: function(a) { _radial = a; _linear = _background = undefined; drawBackground();}}); Object.defineProperty(this, "linear", {set: function(a) { _linear = a; _radial = _background = undefined; drawBackground();}}); Object.defineProperty(this, "background", {set: function(n) { _background = n; _linear = _radial = undefined; drawBackground();}}); Object.defineProperty(this, "windowTitle", {set: function(s) { _winTitle = s;}}); JS3setStageEvents(this); // display list management // this.setSize = function(w, h){ _canvas.width = w; _canvas.height = h; } this.addChild = function(o){ o.parent = _root; o.stage = _context; _children.push(o); } this.addChildAt = function(o, n){ if (n <= _children.length) o.parent = _root; o.stage = _context; _children.splice(n, 0, o); } this.getChildAt = function(n){ return _children[n]; } this.getChildAtRandom = function(){ return _children[Math.floor(Math.random()*_children.length)]; } this.removeChild = function(o){ for (var i = _children.length - 1; i >= 0; i--){ if (_children[i] == o){ removeChildAt(i); break; }}; } this.removeChildAt = function(i){ _children[i].parent = null; _children[i].stage = null; _children.splice(i, 1); } // animation methods // this.run = function(func, delay, repeat, onComp){ // prevent double running // for (var i = _runners.length - 1; i >= 0; i--) if (func == _runners[i].f) return; var r = new JS3Runner(func, delay, repeat, onComp); _runners.push(r); return r; } this.stop = function(func){stopRunner(func);} this.tween = function(obj, secs, props){ if (obj.isTweening) return; obj.isTweening = true; var t = new JS3Tween(obj, secs, props); t.delay == undefined ? initTween(t) : setTimeout(function(){initTween(t)}, t.delay * 1000); } this.clear = function(){ while(_children.length) {_children[0] = null; _children.splice(0, 1);} while(_graphics.length){ _graphics[0] = null; _graphics.splice(0, 1);} _children = []; _graphics = []; drawBackground(); } this.reset = function(){ while(_tweens.length) {_tweens[0] = null; _tweens.splice(0, 1);} while(_runners.length) {_runners[0] = null; _runners.splice(0, 1);} _tweens = []; _runners = []; this.clear(); } this.save = function(){ // save canvas as a png // var img = _canvas.toDataURL('image/png'); var win = window.open('', '_blank', 'width='+_canvas.width+', height='+_canvas.height); win.document.write('