获取随机颜色
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
所谓视差就是物体运动速度的差异 √