Codes:Run<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> #cv1 { /* http://www.colorzilla.com/gradient-editor/ */ background: #a5c956; /* Old browsers */ background: -moz-linear-gradient(top, rgba(165,201,86,1) 0%, rgba(205,235,142,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(165,201,86,1)), color-stop(100%,rgba(205,235,142,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(165,201,86,1) 0%,rgba(205,235,142,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(165,201,86,1) 0%,rgba(205,235,142,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(165,201,86,1) 0%,rgba(205,235,142,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(165,201,86,1) 0%,rgba(205,235,142,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5c956', endColorstr='#cdeb8e',GradientType=0 ); /* IE6-9 */ } </style> <script type="text/javascript"> var select1, canv, ctx; function draw(iScale) { ctx.clearRect(0, 0, 700, 400); ctx.save(); ctx.scale(iScale, iScale); //ctx.rotate(-Math.PI / 4); //ctx.rotate(-Math.PI * 2); ctx.fillStyle = "#c80000"; ctx.fillRect(10, 20, 50, 50); ctx.fillStyle = "rgba(0,0,200,0.5)"; ctx.fillRect(30, 40, 50, 50); ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.strokeRect(30, 40, 50, 50); ctx.font = '2em sans-serif'; ctx.textBaseline = 'top'; ctx.lineWidth = 1; ctx.fillStyle = '#000'; ctx.strokeStyle = '#fff'; ctx.fillText('Canvas', 120, 10); ctx.strokeText('2D Drawing', 240, 10); ctx.beginPath(); ctx.arc(200, 100, 30, 0, Math.PI * 1.5, false); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.arc(300, 100, 30, 0, Math.PI * 2, true); ctx.closePath(); ctx.stroke(); ctx.strokeStyle = '#000'; ctx.beginPath(); ctx.moveTo(10, 200); ctx.lineTo(90, 300); ctx.lineTo(90, 200); ctx.closePath(); ctx.stroke(); var img = new Image(); img.onload = function() { var width = 90; width *= iScale; //scale image size ctx.drawImage(img, 260, 200, width, width); }; img.src = 'http://images.weiphone.com/attachments/Day_090828/22_270438_b871908fc2cccdc.jpg'; ctx.restore(); } window.onload = function() { select1 = document.getElementById('sel1'); for (var i = 0.2; i < 1.6; i += 0.2) { select1.add(new Option(i)); } select1.selectedIndex = 4; select1['onchange'] = function() { var idx = select1.selectedIndex; var obj = select1.options[idx]; draw(obj.innerText); }; canv = document.getElementById('cv1'); ctx = canv.getContext("2d"); canv['onmousemove'] = function(e) { document.getElementById('txt1').value = (e.clientX - canv.offsetLeft) + ',' + (e.clientY - canv.offsetTop); } draw(1); } </script> </head> <body> <div>Scale: <select id='sel1'></select> Mouse Position:<input type='text' id='txt1' /></div> <canvas id="cv1" width="700" height="400">Your browser does not support Canvas</canvas> </body> </html>

Js animation & async

setInterval / clearInterval, setTimeout / clearTimeout

Codes:Run<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript"> var ck1, ck2, itv1, itv2, cv1, ctx,x, div2, wid2, hei2; var INTERVAL1 = 50, INTERVAL2 = 50; function animate1() { ctx.clearRect(x, 20, 50, 50); //clear previous drawing x += 5; if (x >= 800) x = 1; ctx.fillRect(x, 20, 50, 50); } function animate2() { wid2 += 5; hei2 += 1.5; if (wid2 >= 800) { wid2 = hei2 = 1; } div2.style.width = wid2 + 'px'; div2.style.height = hei2 + 'px'; itv2 = setTimeout(animate2, INTERVAL2); } window.onload = function() { cv1 = document.getElementById('cv1'); div2 = document.getElementById('div2'); ck1 = document.getElementById('ck1'); ck2 = document.getElementById('ck2'); ck1['onchange'] = function() { if (ck1.checked) itv1 = setInterval(animate1, INTERVAL1); else clearInterval(itv1); }; ck2['onchange'] = function() { if (ck2.checked) itv2 = setTimeout(animate2, INTERVAL2); else clearTimeout(itv2); }; wid2 = hei2 = 1; x = 1; ctx = cv1.getContext("2d"); ctx.fillStyle = "rgba(0,0,200,0.6)"; ck1['onchange'](); ck2['onchange'](); } </script> </head> <body> <div> <input id='ck1' type='checkbox' checked='checked' /><label for="ck1">enable Animation 1</label> <input id='ck2' type='checkbox' checked='checked' /><label for="ck2">enable Animation 2</label> </div> <canvas id="cv1" width="800" height="100" style="background-color: Lime; margin-top:20px;">Your browser does not support Canvas</canvas> <div id='div2' style="background-color:Olive; position: relative; width:100px; height:100px; margin-top:20px; border: 1px solid black;"> </div> </body> </html>

Some Librarys:

http://jqapi.com/#p=animate jquery animate

https://github.com/JeffreyZhao/jscex http://www.sndacode.com/projects/jscex/wiki move.html sorting-animations.html

http://www.infoq.com/articles/surviving-asynchronous-programming-in-javascript

http://www.neilmix.com/narrativejs/doc/

http://www.infoq.com/articles/stratifiedjs

Js class, ‘delegate’ & Inheritance

Codes:Run<html> <head> <script type="text/javascript"> // class definition function Person(name,gender, age) { this.name = name; this.gender = gender; this.age = age; this.speak = function() { log('this is ' + this.name + ' speaking.'); } } Person.prototype.toString = function() { return this.name + '(age:' + this.gender + '),' + this.age; } Person.Parse = function(s) { //static method try{ var ary = s.split(','); return new Person(ary[0], ary[1], ary[2]); }catch(e){ return null; } } //method use function as argument function revealObject(obj, fn) { var aryInfo = []; for (var k in obj) { var s = fn(k, obj[k]); if (!s) continue; aryInfo.push(s); } return aryInfo.join('\r\n'); } //inheritance function Programer(n, g, a, lan) { Person.call(this, n, g, a); //Person.apply(this, [n, g, a]); this.language = lan; } Programer.prototype = new Person; Programer.prototype.toString = function() { return Person.prototype.toString.call(this) + ' , ' + this.language; } function log(s) { document.getElementById('tOutput').value += (s ? s : '') + '\r\n'; } window.onload = function() { log('class demo\r\n-------------------------------'); var p1 = new Person('bill', 16, 'male'); var p2 = Person.Parse('steve,48,male'); log(p1 + '\r\n' + p2); p1.speak(); p2.speak(); log('\r\ndelegate demo\r\n-------------------------------'); var f1 = function(s1, s2) { return s1 + ' : ' + s2; }; var s1 = revealObject(p1, f1); log(s1); log(); var s2 = revealObject(p2, function(s1, s2) { if (typeof (s2) == 'function') return ''; return s1 + ',' + s2; }); log(s2); log('\r\ninheritance demo\r\n-------------------------------'); var pg1 = new Programer('kate', 'female', 22, 'C, C++'); log(pg1); } </script> </head> <body> <textarea id='tOutput' rows='30' cols='90'></textarea> </body> </html>

http://www.joelonsoftware.com/items/2006/08/01.html

http://mckoss.com/jscript/object.htm

http://ejohn.org/blog/simple-javascript-inheritance/

http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx