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);

---