notes_1(canvas)

<canvas>

var context = canvas.getContext('2d');

• 绘制矩形：
  fillRect(x,y,width,height) 实心的
  strokeRect(x,y,width,height) 空心的
  clearRect(x,y,width,height) 清除指定的矩形区域，使之完全透明
• 绘制复杂形状或路径：
  beginPath() 开始新的路径
  closePath() 闭合路径
  fill() stroke() 填充，空心
  moveTo()
lineTo()
arc(x,y,radius,startAngle,endAngle,anticlockwise) 弧 （顺时针false）
• 绘制文本
  strokeText(text,x,y)
fillText(text,x,y)
  修改字体：
  context.font = '10 pt Arial';
  自定义画笔样式：
  context.fillStyle = "red";
context.strokeStyle = ...;
• 绘制图像
  drawImage(image,x,y,width,height)
dranImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height)
  从原图片切割一个矩形区域 在(x,y)处绘制。
• 平移和旋转：
  translate(x,y) 坐标系的原点平移到(x,y)
  rotate(angle) 以原点为中心顺时针旋转坐标系
  scale(x,y)

Tip: 可以在操作前用save()方法保存当前状态，完毕后restore()返回至上一状态。

---

<audio>

audio格式：MP3、WAV、OGG

canPlayType() 方法检测浏览器支持。注意该函数返回的是：　“”, “maybe”或者”probably”。

检测音频支持:

    var audio = document.createElement('audio');    var mp3Support, oggSupport;    if (audio.canPlayType) {        mp3Support = "" != audio.canPlayType('audio/mpeg');        oggSupport = "" != audio.canPlayType('audio/ogg; codecs="vorbis"');    } else {        mp3Support = false;        oggSupport = false;    }    var soundFileExtn = oggSupport?".ogg":mp3Support?"mp3":undefined;    if(soundFileExtn) {        var sound = new Audio();        sound.src = "somemusic" + soundFileExtn;        sound.play();    }

音频文件加载完成后，audio对象触发canplaythrough事件。可以利用追踪。

    if(soundFileExtn) {        var sound = new Audio();        sound.addEventListener('canplaythrouth', function () {            alert('loaded'）;            sound.play();        });        sound.src = "somemusic" + soundFileExtn;    }

---

精灵图 Sprite Sheet

context.drawImage(this.spriteImage, this.imageWidth*(imageNumber), 0, this.imageWidth, this.imageHeight, x, y,this.imageWidth, this.imageHeight)

---

动画

典型的动画和绘图循环：

function animationloop () {    //遍历游戏物体并更新位置}function drawingloop () {    //1 擦除 canvas    //2 遍历所有物体    //3 绘制每个物体}

时间函数：
setInterval(functionName, timeInterval) 每隔一个时间间隔就调用一次函数。
clearInterval()

setTimeout(functionName, timeInterval) 在给定时间间隔后，调用函数一次。
clearTimeout()

---

使用requestAnimationFrame:

(function() {    var lastTime = 0;    var vendors = ['ms', 'moz', 'webkit', 'o'];    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];        window.cancelAnimationFrame =           window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];    }    if (!window.requestAnimationFrame)        window.requestAnimationFrame = function(callback, element) {            var currTime = new Date().getTime();            var timeToCall = Math.max(0, 16 - (currTime - lastTime));            var id = window.setTimeout(function() { callback(currTime + timeToCall); },               timeToCall);            lastTime = currTime + timeToCall;            return id;        };    if (!window.cancelAnimationFrame)        window.cancelAnimationFrame = function(id) {            clearTimeout(id);        };}());

使用requestAnimationFrame调用绘图循环：

function drawingLoop (nowTime) {    var gameLoop = requestAnimationFrame(drawingLoop);    //清空canvas    //遍历所有物体    //画出它们}

要停止动画：

cancelAnimationFrame(gameLoop);

---