js—Canvas笔记

获取随机颜色

function randomColor(){
    var r = parseInt(Math.random()*256);
    var g = parseInt(Math.random()*256);
    var b = parseInt(Math.random()*256);
    return "rgb(" + r + "," + g + "," + b + ")";
}

播放音乐

canvas.addEventListener("click", function (){  //浏览器不能自动播放音乐了
var audio=document.createElement("audio");
audio.src="moon.mp3";
audio.load();
audio.play();

audio.pause();   // t停止
})

获取黑白色图片

function getColorData() {
  var length = canvas.width * canvas.height;
  myImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < length * 4; i += 4) {
    myGray = parseInt((myImage.data[i]+myImage.data[i+1]+ myImage.data[i+2]) / 3);
    myImage.data[i] = myGray;
    myImage.data[i + 1] = myGray;
    myImage.data[i + 2] = myGray;
  }
}
getColorData()；
ctx.putImageData(myImage, 0, 0);

坐标转换

由于边界大小等问题，canvas的坐标与实际操作的坐标不同。

var windowToCanvas = function (x, y) {
    var box = canvas.getBoundingClientRect();
    return {
        x: (x - box.left) * (canvas.width / box.width),
        y: (y - box.top) * (canvas.width / box.width)
    };
};

绑定键盘事件

window.onkeydown=onGameKeydown;

function onGameKeydown(e){
    
    switch(e.keyCode){
        case xx:
            xxxxxx
            break;
    }
    
}

渐变颜色

 	gradient=context.createLinearGradient(x1, y1, x2, y2);
 	//createRadialGradient(x1, y1, r1, x2, y2, r2); 圆形
    gradient.addColorStop(0, 'rgba(255,255,255,0)');
    gradient.addColorStop(0.3, 'rgba(255,155,100,0.7)');
    gradient.addColorStop(1, 'rgba(255,155,100,1)');
    context.fillStyle=gradient;

阴影

ctx.shadowBlur=20;
shadowOffsetX =       //左负右正
shadowOffsetY =       //上负下正
ctx.shadowColor="black";

文本的属性

context.measureText(TEXT).width
context.textBaseline='middle'; //垂直对齐
ctx.textAlign = 'center';   //水平居中

文本的宽度和高度值可以通过文本大小获取。 X

当调用动画函数时，动画函数参数中的回调函数会一并触发。 X

精灵的外观必须执行精灵对象的paint方法，才能被绘制 X

精灵对象如果要发生运动，则必须为它定义行为 X

所谓视差就是物体运动速度的差异 √