ECMAScript 5与HTML5 的支持情况

JSON.parse( text, translate )
JSON.stringify( obj, translate )
String.prototype.toJSON
Boolean.prototype.toJSON
Number.prototype.toJSON
Date.prototype.toJSON

http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/

http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx

Date.now

支持浏览器： chrome4 firefox2+ safari4

http://trac.webkit.org/changeset/33422

https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Date/now

Date.prototype.toISOString

支持浏览器： chrome4 firefox3.6 safari4

https://bugs.webkit.org/show_bug.cgi?id=26594

String.prototype.trim

支持浏览器： chrome1+ firefox3+

https://bugs.webkit.org/show_bug.cgi?id=26590

http://code.google.com/p/v8/issues/detail?id=465

https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Objects/String/Trim

“Array extras”

Array.prototype.{indexOf,lastIndexOf,every,some,forEach,map,filter,reduce,reduceRight}

IE8全部不支持，Opera不支持reduce,reduceRight，chrome与safari与firefox早就实现了

https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras

Array.isArray

支持浏览器： chrome4 opera10.50

http://codereview.chromium.org/271072

ECMAScript 5 Getters and Setters

这是旧有的javascript不能模拟的新特性！

o = {
  a:7,
  get b() { return this.a+1; },
  set c(x) { this.a = x/2; }
};

https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters

支持浏览器：Firefox 2.0+, Safari 3.0+, Chrome 1.0+, Opera 9.5+

非标准，Firefox1.5里的旧方法

HTMLElement.prototype.__defineGetter__("innerHTML", function () {});
HTMLElement.prototype.__defineSetter__("innerHTML", function (val) {});

支持浏览器：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+

标准

Object.defineProperty(document.body, "innerHTML", { get : function () {} });
MSDN文档：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

支持：IE8+ (只能对DOM使用)

HTML5 DOM Storage

window.localStorage
window.sessionStorage //可跨域，标签页关掉就清空

支持浏览器：Firefox 3.5+, Safari 4.0+, IE 8.0+

http://www.w3.org/TR/webstorage/

http://www.quirksmode.org/dom/html5.html#localstorage

https://developer.mozilla.org/en/DOM/Storage

http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

HTML5 Offline Application Cache

用一个manifest文件缓存静态资源（图片,css, js之类）在离线状态下使用，不是结构化数据

<html manifest="foo.manifest">
<h1>Entry</h1>
</html>

支持浏览器：Firefox 3.5+

http://www.w3.org/TR/offline-webapps/#offline

https://developer.mozilla.org/en/Offline_resources_in_Firefox

HTML5 Web SQL Database Storage

//2007年就实现了！
var database = openDatabase("Database Name", "Database Version");

database.executeSql("SELECT * FROM test", function(result1) {
   // do something with the results
   database.executeSql("DROP TABLE test", function(result2) {
     // do some more stuff
     alert("My second database query finished executing!");
   });
});

支持浏览器：Safari, iPhone OS 3, Opera 10.50，chrome4

http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/

http://www.weboshelp.net/getting-started-with-webos/156-palm-webos-html5-database-storage-tutorial/

HTML5 Web Workers

实现多线程！？

var worker = new Worker("worker.js");
// Watch for messages from the worker
worker.onmessage = function(e){
  // The message from the client:
  e.data
};

worker.postMessage("start");

支持浏览器：firefox3.1+

http://www.w3.org/TR/workers/

https://developer.mozilla.org/En/Using_web_workers

日本人用它来实现的框架

HTML5 Geolocation

支持浏览器：FF3.5+, iPhone OS 3

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=620" />
<title>HTML5 Demo: geolocation</title>
<style>
body { 
 font: normal 16px/20px Helvetica, sans-serif;
 background: rgb(237, 237, 236);
 margin: 0;
 margin-top: 40px;
 padding: 0;
}

section, header, footer {
  display: block;
}

#wrapper {
  width: 600px;
  margin: 0 auto;
  background: #fff url(images/shade.jpg) repeat-x center bottom;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-top: 1px solid #fff;
  padding-bottom: 76px;
}

h1 {
  padding-top: 10px;
}

h2 {
  font-size: 100%;
  font-style: italic;
}

header,
article > *,
footer > * {
  margin: 20px;
}

footer > * {
  margin: 20px;
  color: #999;
}

#status {
  padding: 5px;
  color: #fff;
  background: #ccc;
}

#status.fail {
  background: #c00;
}

#status.success {
  background: #0c0;
}

</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<section id="wrapper">
 <header>

<h1>Geolocation</h1>
 </header>
 <article>
 Finding your location: checking...
 </article>
 <footer><a href="http://www.cnblogs.com/rubylouvre/archive/2010/02/16/1668647.html">返回</a></footer>
</section>

function error(msg) {
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';
  
  // console.log(arguments);
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');
}

</script>

</body>
</html>

http://www.w3.org/TR/geolocation-API/

https://developer.mozilla.org/En/Using_geolocation

HTML5 Drag and Drop

原生拖放API

<!DOCTYPE html> 
<html> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/> 
<title>HTML5 Drag and drop demonstration</title> 
<style type="text/css"> 
* {
 margin: 0;
 padding: 0;
}
 
body {
 margin: 50px;
 font-family: helvetica, arial;
}
 
li {
 list-style: none;
}
 
li a {
 text-decoration: none;
 color: #000;
 margin: 10px;
 width: 150px;
 border: 3px dashed #999;
 background: #eee;
 padding: 10px;
 display: block;
}
 
*[draggable=true] {
 -moz-user-select:none;
 -khtml-user-drag: element;
 cursor: move;
}
 
*:-khtml-drag {
 background-color: rgba(238,238,238, 0.5);
}
 
a:hover:after {
 content: ' (drag me)';
}
 
li.over {
 border-color: #333;
 background: #ccc;
}
 
#bin {
 background: url(http://html5demos.com/images/bin.jpg) top right no-repeat;
 height: 250px;
 width: 166px;
 float: right;
 border: 5px solid #000;
 position: relative;
}
 
#bin.over {
 background: url(images/bin.jpg) top left no-repeat;
}
 
#bin p {
 font-weight: bold;
 text-align: center;
 position: absolute;
 bottom: 20px;
 width: 166px;
 font-size: 32px;
 color: #fff;
 text-shadow: #000 2px 2px 2px;
}
 
</style> 
</head> 
<body> 
 <div id="bin"></div> 
 <ul> 
 <li><a id="one" href="#">one</a></li> 
 <li><a href="#" id="two">two</a></li> 
 <li><a href="#" id="three">three</a></li> 
 <li><a href="#" id="four">four</a></li> 
 <li><a href="#" id="five">five</a></li> 
 </ul> 
 <script src="https://files.cnblogs.com/rubylouvre/html5.js"></script> 
 <script> 
 
 var eat = ['yum!', 'gulp', 'burp!', 'nom'];
 var yum = document.createElement('p');
 var msie = /*@cc_on!@*/0;
 yum.style.opacity = 1;
 
 var links = document.querySelectorAll('li > a'), el = null;
 for (var i = 0; i < links.length; i++) {
 el = links[i];
 
 el.setAttribute('draggable', 'true');
 
 addEvent(el, 'dragstart', function (e) {
 e.dataTransfer.effectAllowed = 'move';
 e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
 });
 }
 
 var bin = document.querySelector('#bin');
 
 addEvent(bin, 'dragover', function (e) {
 if (e.preventDefault) e.preventDefault(); // allows us to drop
 this.className = 'over';
 return false;
 });
 
 // to get IE to work
 addEvent(bin, 'dragenter', function (e) {
 this.className = 'over';
 return false;
 });
 
 addEvent(bin, 'dragleave', function () {
 this.className = '';
 });
 
 addEvent(bin, 'drop', function (e) {
 if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???
 
 var el = document.getElementById(e.dataTransfer.getData('Text'));
 
 el.parentNode.removeChild(el);
 
 // stupid nom text + fade effect
 bin.className = '';
 yum.innerHTML = eat[parseInt(Math.random() * eat.length)];
 
 var y = yum.cloneNode(true);
 bin.appendChild(y);
 
 setTimeout(function () {
 var t = setInterval(function () {
 if (y.style.opacity <= 0) {
 if (msie) { // don't bother with the animation
 y.style.display = 'none';
 }
 clearInterval(t); 
 } else {
 y.style.opacity -= 0.1;
 }
 }, 50);
 }, 250);
 
 return false;
 });
 
 </script>

</body> 
</html>

支持浏览器：IE8, Safari 4, FF3.5

IE8如果报错，请刷新当前页面……

http://www.w3.org/TR/html5/editing.html#dnd

https://developer.mozilla.org/En/DragDrop/Drag_and_Drop

HTML5 Video

支持浏览器：Safari 4, FF3.5,chrome3+

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset=utf-8 /> 
<title>HTML5 Demo: video</title> 
<style> 
body { 
 font: normal 16px/20px Helvetica, sans-serif;
 background: rgb(237, 237, 236);
 margin: 0;
 margin-top: 40px;
 padding: 0;
}
 
article, section, header, footer {
 display: block;
}
 
#wrapper {
 width: 600px;
 margin: 0 auto;
 background: #fff url(http://html5demos.com/images/shade.jpg) repeat-x center bottom;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-top: 1px solid #fff;
 padding-bottom: 76px;
}
 
h1 {
 padding-top: 10px;
}
 
h2 {
 font-size: 100%;
 font-style: italic;
}
 
header,
article > *,
footer a,
footer p {
 margin: 20px;
}
 
footer > * {
 margin: 20px;
 color: #999;
}
 
article {
 display: block;
 position: relative;
}
 
</style> 
</head> 
<body> 
<section id="wrapper"> 
 <header> 
 <h1>Video</h1> 
 </header> 
 <article> 
 <video> 
 <source src="http://html5demos.com/dizzy.mp4" /> 
 <source src="http://html5demos.com/dizzy.ogv" /> 
 </video> 
 
 <input type="button" id="play" value="play"> 
 00:00 / loading... 
 
 Note that (at time of writing) <a href="http://webkit.org/" title="The WebKit Open Source Project">Webkit nightly</a> supports full screen mode, which will add a button above. 
 </article> 
 <footer><a href="http://www.cnblogs.com/rubylouvre/">返回</a></footer> 
</section> 
<script src="http://html5demos.com/h5utils.js"></script> 
<script> 
var video = document.querySelector('video'),
 togglePlay = document.querySelector('#play'),
 position = document.querySelector('#position'),
 ready = false,
 controls = document.querySelector('#controls'),
 fullscreen = null;
 
addEvent(togglePlay, 'click', function () {
 if (ready) {
 video.playbackRate = 0.5;
 if (video.paused) {
 if (video.ended) video.currentTime = 0;
 video.play();
 this.value = "pause";
 } else {
 video.pause();
 this.value = "play";
 }
 }
});
 
addEvent(video, 'timeupdate', function () {
 position.innerHTML = asTime(this.currentTime);
});
 
addEvent(video, 'ended', function () {
 togglePlay.value = "play";
});
 
addEvent(video, 'canplay', function () {
 video.muted = true;
 ready = true;
 document.querySelector('#duration').innerHTML = asTime(this.duration);
 
 // note: .webkitSupportsFullscreen is false while the video is loading, so we bind in to the canplay event
 if (video.webkitSupportsFullscreen) {
 fullscreen = document.createElement('input');
 fullscreen.setAttribute('type', 'button');
 fullscreen.setAttribute('value', 'fullscreen');
 controls.insertBefore(fullscreen, controls.firstChild);
 addEvent(fullscreen, 'click', function () {
 video.webkitEnterFullScreen();
 });
 }
 
});
 
function asTime(t) {
 t = Math.round(t);
 var s = t % 60;
 var m = Math.round(t / 60);
 
 return two(m) + ':' + two(s);
}
 
function two(s) {
 s += "";
 if (s.length < 2) s = "0" + s;
 return s;
}
</script>

</body> 
</html>

https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox

http://webkit.org/blog/140/html5-media-support/

HTML5 audio

支持浏览器：Safari 4, FF3.5,chrome3+

<!doctype html>
<html dir="ltr" lang="zh-CN">
 <head>
 <meta charset="utf-8"/>
 <title>阅读器</title>
 </head>
 <body >
 <article id="nativity-story-from-luke"
 xmlns:o="http://www.bibletechnologies.net/2003/OSIS/namespace">
 <style scoped="">
 /*@namespace o "http://www.bibletechnologies.net/2003/OSIS/namespace";
	o|verse[osisID]:before,
	verse[osisID]:before {
		content: " " attr(osisID);
		font-size:smaller;
		vertical-align:super;
	}*/
 #nativity-story-from-luke audio {
 display:block;
 margin-top:1em;
 margin-bottom:1em;
 width:100%;
 }
 #nativity-story-from-luke span[data-begin]::selection { background-color:yellow; }
 #nativity-story-from-luke span[data-begin]::-moz-selection { background-color:yellow; }
 #nativity-story-from-luke span[data-begin] {
 cursor:pointer;
 }
 #nativity-story-from-luke span[data-begin]:hover {
 background-color:#FFFFCA;
 }
 #nativity-story-from-luke .error {
 color:red;
 }
 #nativity-story-from-luke footer {
 line-height:1.1em;
 margin-top:1em;
 }
 html #nativity-story-from-luke h2 { /* for appearance on my site */
 font-size:1.3em;
 margin-top:0;
 padding-top:0.5em;
 margin-bottom:1em;
 }
 </style>

<audio controls="" style="width:100%; height:2em;">
 <source src="http://weston.ruter.net/projects/html5-audio-read-along/Luke.2.1-Luke.2.20.mp3" type="audio/mp3" />
 <source src="http://weston.ruter.net/projects/html5-audio-read-along/Luke.2.1-Luke.2.20.ogg" type="audio/ogg" />
 <source src="http://weston.ruter.net/projects/html5-audio-read-along/Luke.2.1-Luke.2.20.wav" type="audio/wav" />
 Notice: Your browser doesn't appear to support HTML5 Audio. Please use try Firefox 3.5, Chrome, or Safari.
 </audio>
 <noscript>
 Notice: You must have JavaScript enabled/available to try this HTML5 Audio read along. If you're
		viewing this in a feed reader, try <a href="http://weston.ruter.net/projects/html5-audio-read-along/#nativity-story-from-luke">viewing outside</a>.
 </noscript>

<o:verse sID="Luke.2.1" osisID="Luke.2.1"/>In those days a decree went out from Caesar Augustus that all the world should be registered. <o:verse eID="Luke.2.1"/><o:verse sID="Luke.2.2" osisID="Luke.2.2"/>This was the first registration when Quirinius was governor of Syria. <o:verse eID="Luke.2.2"/><o:verse sID="Luke.2.3" osisID="Luke.2.3"/>And all went to be registered, each to his own town. <o:verse eID="Luke.2.3"/><o:verse sID="Luke.2.4" osisID="Luke.2.4"/>And Joseph also went up from Galilee, from the town of Nazareth, to Judea, to the city of David, which is called Bethlehem, because he was of the house and lineage of David, <o:verse eID="Luke.2.4"/><o:verse sID="Luke.2.5" osisID="Luke.2.5"/>to be registered with Mary, his betrothed, who was with child. <o:verse eID="Luke.2.5"/><o:verse sID="Luke.2.6" osisID="Luke.2.6"/>And while they were there, the time came for her to give birth. <o:verse eID="Luke.2.6"/><o:verse sID="Luke.2.7" osisID="Luke.2.7"/>And she gave birth to her firstborn son and wrapped him in swaddling cloths and laid him in a manger, because there was no place for them in the inn.<o:verse eID="Luke.2.7"/>
 
 <o:verse sID="Luke.2.8" osisID="Luke.2.8"/>And in the same region there were shepherds out in the field, keeping watch over their flock by night. <o:verse eID="Luke.2.8"/><o:verse sID="Luke.2.9" osisID="Luke.2.9"/>And an angel of the Lord appeared to them, and the glory of the Lord shone around them, and they were filled with fear. <o:verse eID="Luke.2.9"/><o:verse sID="Luke.2.10" osisID="Luke.2.10"/>And the angel said to them, <q>Fear not, for behold, I bring you good news of great joy that will be for all the people. <o:verse eID="Luke.2.10"/><o:verse sID="Luke.2.11" osisID="Luke.2.11"/>For unto you is born this day in the city of David a Savior, who is Christ the Lord. <o:verse eID="Luke.2.11"/><o:verse sID="Luke.2.12" osisID="Luke.2.12"/>And this will be a sign for you: you will find a baby wrapped in swaddling cloths and lying in a manger.</q> <o:verse eID="Luke.2.12"/><o:verse sID="Luke.2.13" osisID="Luke.2.13"/>And suddenly there was with the angel a multitude of the heavenly host praising God and saying,<o:verse eID="Luke.2.13"/>
<blockquote>
 <o:verse sID="Luke.2.14" osisID="Luke.2.14"/>Glory to God in the highest, 
 and on earth peace among those with whom he is pleased!<o:verse eID="Luke.2.14"/>
</blockquote>
<o:verse sID="Luke.2.15" osisID="Luke.2.15"/>When the angels went away from them into heaven, the shepherds said to one another, <q>Let us go over to Bethlehem and see this thing that has happened, which the Lord has made known to us.</q> <o:verse eID="Luke.2.15"/><o:verse sID="Luke.2.16" osisID="Luke.2.16"/>And they went with haste and found Mary and Joseph, and the baby lying in a manger. <o:verse eID="Luke.2.16"/><o:verse sID="Luke.2.17" osisID="Luke.2.17"/>And when they saw it, they made known the saying that had been told them concerning this child. <o:verse eID="Luke.2.17"/><o:verse sID="Luke.2.18" osisID="Luke.2.18"/>And all who heard it wondered at what the shepherds told them. <o:verse eID="Luke.2.18"/><o:verse sID="Luke.2.19" osisID="Luke.2.19"/>But Mary treasured up all these things, pondering them in her heart. <o:verse eID="Luke.2.19"/><o:verse sID="Luke.2.20" osisID="Luke.2.20"/>And the shepherds returned, glorifying and praising God for all they had heard and seen, as it had been told them.<o:verse eID="Luke.2.20"/>

/**
     * Build an index of all of the words that can be read along with their begin,
     * and end times, and the DOM element representing the word.
     */
    var wordTimes = [];
    Array.prototype.forEach.call(root.querySelectorAll("[data-begin]"), function(word){
      var wordTime = {
        begin : parseFloat(word.getAttribute("data-begin")),
        dur   : parseFloat(word.getAttribute("data-dur")),
        word  : word
      };
      wordTime.index = wordTimes.length;
      wordTime.end = wordTime.begin + wordTime.dur;
      word.setAttribute('data-timeindex', wordTime.index);
      wordTimes.push(wordTime);
    });

/**
 * Find the next word that should be played (or that is currently being played)
 * @todo Note: this would better be implemented as a binary search
 */
 function getNextWordTime(){
 var wordTime = null,currentTime = audio.currentTime;
 for(var i = 0, len = wordTimes.length; i < len; i++){
 var thisWordTime = wordTimes[i];
 if((currentTime >= thisWordTime.begin && currentTime < thisWordTime.end) || currentTime < wordTimes[i].begin)
 {
 return thisWordTime;
 }
 }
 return null;
 }

var selection = window.getSelection();
    var timeoutSelectNext;

/**
     * Select the next word that is going to be read or the word that is being
     * read right now
     * @param Boolean hold  Whether or not the subsequent word should automatically be selected
     */
    function selectNextWord(hold){
      clearTimeout(timeoutSelectNext);
      var next = getNextWordTime();
      if(next){
        function select(hold){
          selection.removeAllRanges();
          var range = document.createRange();
          range.selectNode(next.word);
          selection.addRange(range);
          if(!hold){
            timeoutSelectNext = setTimeout(function(){
              selection.removeAllRanges();
              if(!audio.paused)
                selectNextWord();
            }, Math.round((next.end - audio.currentTime)*1000));
          }
        }

//Select now
        if(hold || audio.currentTime >= next.begin){
          select(hold);
        }
        //Select later
        else {
          timeoutSelectNext = setTimeout(function(){
            select();
          }, Math.round((next.begin - audio.currentTime)*1000));
        }
      }
    }

/**
     * Select next word (at audio.currentTime) when playing starts
     */
    audio.addEventListener('play', function(e){
      selectNextWord();
    }, false);

/**
     * Abandon seeking the next word because we're paused
     */
    audio.addEventListener('pause', function(e){
      clearTimeout(timeoutSelectNext);
    }, false);

/**
     * Seek by clicking (event delegation)
     */
    root.addEventListener('click', function(e){
      if(e.target.hasAttribute('data-begin')){
        var i = e.target.getAttribute('data-timeindex');
        //audio.currentTime = wordTimes[i].begin + wordTimes[i].dur/2; //@TODO
        audio.currentTime = wordTimes[i].begin + 0.001; //Note: times apparently cannot be exactly set and sometimes select too early
        selectNextWord();
      }
    }, false);

/**
     * Play a word when double-clicking (event delegation)
     * Only plays the single word.
     */
    root.addEventListener('dblclick', function(e){
      audio.play();
    }, false);

/**
     * Select a word when seeking
     */
    audio.addEventListener('seeked', function(e){
      selectNextWord(e.target.paused /* for hold, probably always true */);
    }, false);

})();
 /* CDATA section stripped due to WordPress bug: https://core.trac.wordpress.org/ticket/3670 */
</script>

<hr />
<footer>
 Scripture taken from The Holy Bible, English Standard Version. Copyright
		©2001 by <a href="http://www.crosswaybibles.org" target="_blank">Crossway Bibles</a>, a
		publishing ministry of Good News Publishers. Used by permission. All rights
		reserved. Text provided by the <a href="http://www.gnpcb.org/esv/share/services/" target="_blank">Crossway Bibles Web
		Service</a>.
</footer>
</article> 
</body>
</html>

HTML5 canvas

支持浏览器：IE以外所有新锐浏览器

<!doctype html>
<html dir="ltr" lang="zh-CN">
 <head>
 <meta charset="utf-8"/>
 <meta content="IE=8" http-equiv="X-UA-Compatible"/>
 <title>canvas by 司徒正美</title>
 </head>
 <body id="id10">
 <section id="wrapper">
 <header>
 <h1>Canvas</h1>
 </header>
 <article></article>
 <a href="http://www.cnblogs.com/rubylouvre/">返回</a>
 </section>
 <script src="http://html5demos.com/h5utils.js"></script>
 <script>

buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });

function buildSpinner(data) {

var canvas = document.createElement('canvas');
      canvas.height = 100;
      canvas.width = 300;
      document.getElementsByTagName('article')[0].appendChild(canvas);
      var ctx = canvas.getContext("2d"),
      i = 0, degrees = data.degrees, loops = 0, degreesList = [];

for (i = 0; i < degrees; i++) {
 degreesList.push(i);
 }

// reset
      i = 0;

// so I can kill it later
      window.canvasTimer = setInterval(draw, 1000/degrees);

function reset() {
        ctx.clearRect(0,0,100,100); // clear canvas

var left = degreesList.slice(0, 1);
        var right = degreesList.slice(1, degreesList.length);
        degreesList = right.concat(left);
      }

function draw() {
        var c, s, e;

var d = 0;

if (i == 0) {
          reset();
        }

ctx.save();

d = degreesList[i];
        c = Math.floor(255/degrees*i);
        ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
        ctx.lineWidth = data.size;
        ctx.beginPath();
        s = Math.floor(360/degrees*(d));
        e = Math.floor(360/degrees*(d+1)) - 1;

ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
        ctx.stroke();

ctx.restore();

i++;
        if (i >= degrees) {
          i = 0;
        }
      }
    }

</script>
</body>
</html>

https://developer.mozilla.org/en/Canvas_tutorial