};
_______________________________________________ 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.οnlοad=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基本属性差不多写完了,下一篇连载即将步入正题,开始制作飞鸟游戏!
本篇文章连载 , 纯手打 , 欢迎改正!
