一篇文章带你制作 canvas 小游戏 (2)

window.requestAnimationFrame();

这个方法是,HTML5 专门为js实现动画效果提供的一个函数!(推荐大家使用)

setInterval 的劣势:
1.指定定时器的时间不准确  // 4ms /10ms
2.执行动画效果会造成性能的问题,如果页面中使用了多个定时器,每个定时器中都来操作dom元素,操作dom频繁了以后,会造成严重性能问题;

看性能: DOM 的重绘和重排(影响web程序的两个重要因素);
3.会造成丢帧的问题(浏览器刷新频率: 60HZ(一秒钟刷新60次)==>16.67毫秒的时间完成js效果,才不会卡!! 浏览器和定时器的刷新频率不一样,浏览器每次只能显示一帧,定时器过快会丢帧);

window.requestAnimationFrame();
能够每隔一段时间来调用一个回调函数来执行某段代码逻辑;
优势:
1. requestAnimationFrame 是根据当前浏览器的刷新频率来进行调用的(浏览器刷新一次,就会将所有 requestAnimationFrame中执行的回调函数执行一次,不会造成丢帧的问题)
2. 页面中所有的requestAnimationFrame 会在浏览器刷新的时候,一次性全部执行;(性能会有所提高);
3.因为requestAnimationFrame 方法会根据当前浏览器的刷新频率来执行,所以,事件是不固定的,但是,不会有问题;

requestAnimationFrame 语法:

var fn = function(){
//在函数的最后调用requestAnimationFrame 函数;
//函数接受一个函数参数,就是告诉浏览器下一次刷新的时候,调用fn
window.requestAnimationFrame(fn);

};

_______________________________________________

canvas 变化 :
3种变换方式: 平移 ,旋转 ,缩放(translate,rotate,scale)
这三种都是对canvas中坐标系的变换;

平移变换:
ctx.translate(x,y) // 原点平移以后,在绘制内容就是按新坐标系的坐标进行绘制的;

旋转变换:
ctx.rotate(toRadian(弧度));//按照当前坐标系的原点进行旋转(新的坐标系)

缩放变换:
ctx.scale(1,1)  // 对坐标系进行改变
_______________________________________________

绘制状态的保存和恢复:

canvas绘图是基于状态绘图的;(设置好一个状态,接下来的绘制都是在这个状态的基础上,来绘制的!!)

设置状态:
canvas中的两个方法:

ctx.save(); //保存当前的绘制状态,(仅仅保存状态)
ctx.restore() //恢复到上一次保存的状态
//一般情况下,这两个方法配合起来使用,一般都是保存默认状态,然后通过
restore 将默认状态进行恢复!!

save()保存的状态是以栈的形式存储的 //如果调用的save方法两次,需要调用
restore两次,才能取出需要的状态!

最佳实践:save一次 ,restore一次;

表示重叠部分变为透明色;
globalCompositeOperation='destination-out';

base64 编码的图片: 
//就是用字符串来表示一个图片

//将canvas画布转换为base64编码的图片字符串
cv.toDataURL('image/png',1)  ; 1 表示无损压缩

ctx.getImageData() //获取画布中的像素信息

_______________________________________________

封装一个canvas所有图片加载完成调用的方法: // 图片路径在images里

onLoadImg=function(imgSrc,callback){var listImg={};var content=0;var imgLen=imgSrc.length;//给图片添加路径imgSrc.forEach(function(val,index){var img = new Image();img.src='images/'+val+'.png';listImg[val]=img;img.onload=function(){content++;//全部加载完成调用回调函数if(content>=imgLen){callback(listImg);console.log('hehe')};};});};

图片加载完成后就可以使用drawImage方法在画布中绘制图片了;

drawImage :

绘制图片: 还能绘制视频 和 另一个画布

对于有性能要求的功能中 ,可以通过两个canvas画布配合来实现,在隐藏的画布中绘制,最后直接将隐藏画布绘制到画布中给用户看,能提高性能!
ctx.drawImage(cv1.0,0);

线帽:    lineCap
创建拐角:   lineJoin

绘制虚线: ctx.setLineDash([5]) //参数是数组 ,为空(实现)

阴影:
ctx.shadowColor='teal';
ctx.shadowBlur=10; //模糊级别
ctx.shadowOffsetX =10;
ctx.shadowOffsetX =10;

创建渐变对象:
var grd =ctx.createLinearGradient();
grd.addColorStop(0,'green');

设置背景:
var pat = ctx.createPattern(img,repeat) //对象,平铺
ctx.fillStyle=pat

限定剪裁的区域:
ctx.arc();
ctx.clip() //只能在路径中绘制内容;

设置不透明度:

ctx.globalAlpha='.4'; // 全局设置不透明度

检测坐标:ctx.isPointInPath(x,y) 

作用:用来检测坐标(x,y)是否在当前路径中,如果在,
就返回TRUE否者false (有路径才行)

canvas基本属性差不多写完了,下一篇连载即将步入正题,开始制作飞鸟游戏!

本篇文章连载 , 纯手打 , 欢迎改正!