- A+
所属分类：Web前端
1.刮刮乐
案例目标：利用canvas绑定事件，模拟简单刮刮乐程序。
案例思路：在canvas画布上引入是否中奖背景图片，然后在图片上覆盖涂层，当鼠标点击
并移动时擦出路径上的涂层，显示中奖信息。
主要事件：onload，onmousedown，onmousemove，onmouseup
代码示例：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas7刮刮乐</title> </head> <body> <canvas id="canvas7" width="520" height="780"> "您的浏览器不支持Canvas！" </canvas> <script> var canvas=document.getElementById('canvas7'); var ctx=canvas.getContext('2d'); var imageArr=['../Images/rotation01.jpg','../Images/rotation02.jpg','../Images/rotation03.jpg']; var imgObj={}; var flag=0; for (var i=0;i<imageArr.length;i++){ var img=new Image(); img.src=imageArr[i]; imgObj[i]=img; img.onload=function () { flag++ //确保待图片全部加载完成后调用“lottery()”方法。 if (flag==imageArr.length){ lottery(imgObj); //全部图片加载完成后调用函数。 } } } // 单独封装随机背景和清除覆盖填充函数 function lottery(obj) { var num=Math.ceil(Math.random()*10); //创建随机数，通过设置随机数值控制中奖概率 if (num == 1){ canvas.style.background='URL('+obj[0].src+')'; }else if (num ==2){ canvas.style.background='URL('+obj[1].src+')'; }else { canvas.style.backgroundImage='URL('+obj[2].src+')'; } ctx.fillStyle='lightgray'; ctx.fillRect(0,0,canvas.width,canvas.height); // 创建鼠标点击事件，鼠标移动清除画像填充 canvas.onmousedown=function () { canvas.onmousemove=function (e) { e = e||window.event; ctx.clearRect(e.offsetX,e.offsetY,25,25); //利用offset对象定位鼠标轨迹，设定清除范围 } } // 创建鼠标抬起事件，停止鼠标移动事件 canvas.onmouseup=window.document.onmouseup=function () { canvas.onmousemove=null; } } </script> </body> </html>
2.小球动画
⑴ 一个小球动画
代码示例：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas8小球动画</title> <style> canvas{ border: 1px solid #1e7e34; } </style> </head> <body> <canvas height="300" width="600" id="canvasBall" ></canvas> <script> var canvas=document.getElementById('canvasBall'); var ctx=canvas.getContext('2d'); //定义小球半径 var r=Math.floor(Math.random()*50)+10; //定义小球圆心坐标 var x=Math.floor(Math.random()*(600-r*2)+r); var y=Math.floor(Math.random()*(300-r*2)+r); //定义小球随机填充颜色 var color='rgb('+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+')'; //定义小球移动速度 var dx=3; var dy=6; //实现小球运动效果 var timer=setInterval(function () { ctx.clearRect(0,0,canvas.width,canvas.height); x+=dx; y+=dy; if (x>=600-r){ dx=-dx; }else if (x<=r){ dx=Math.abs(dx); } if (y>=300-r){ dy=-dy; }else if (y<=r){ dy=Math.abs(dy); } ctx.beginPath(); ctx.arc(x, y, r, 0,Math.PI*2,false); ctx.fillStyle=color; ctx.fill(); ctx.closePath(); },50) </script> </body> </html>
⑵ 随机多个小球
代码示例：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas8小球动画</title> <style> canvas{ border: 1px solid #1e7e34; } </style> </head> <body> <canvas height="300" width="600" id="canvasBall" ></canvas> <script> var canvas=document.getElementById('canvasBall'); var ctx=canvas.getContext('2d'); //创建生成小球的构造函数。 function Ball() { //定义随机半径 this.r=Math.ceil((Math.random()*20)+10); //定义随机生成圆心坐标 this.x=Math.ceil(Math.random()*(600-this.r)); this.y=Math.ceil(Math.random()*(300-this.r)); //定义小球随机运动速度 this.dx=Math.ceil(Math.random()*3); this.dy=Math.ceil(Math.random()*6); //定义小球随机颜色填充（颜色填充值为字符串格式） this.color1='rgb('+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+')'; /* //设置小球随机径向渐变填充 var radialGradient=ctx.createRadialGradient(this.x, this.y,this.r/4,this.x, this.y, this.r/2); radialGradient.addColorStop(0,'white'); radialGradient.addColorStop(0.5,'yellow'); radialGradient.addColorStop(1,'red'); this.color2=radialGradient;*/ } //创建小球运动函数，通过原型定义 Ball.prototype.move=function () { //定义水平方向 this.x+=this.dx; if (this.x>=(600-this.r)){ this.dx = -this.dx; }else if (this.x<=this.r){ this.dx = Math.abs(this.dx); } //定义垂直方向 this.y+=this.dy; if (this.y>=(300-this.r)){ this.dy = -this.dy; }else if (this.y<=this.r){ this.dy = Math.abs(this.dy); } } //绘制圆形小球，函数原型上定义 Ball.prototype.draw=function () { ctx.beginPath(); ctx.fillStyle=this.color1; //不支持径向渐变效果？？ ctx.arc(this.x, this.y, this.r, 0,Math.PI*2,false); ctx.fill(); ctx.closePath(); } //执行小球绘制，调用构造函数Ball() var arr=[]; for (var i=0;i<25;i++){ arr[i]=new Ball(); console.log(arr[i].color1); // console.log(arr[i].color2); } console.log(arr); //通过setInterval方法实现小球运动效果 var timer=setInterval(function () { //清除画布 ctx.clearRect(0,0,canvas.width,canvas.height); //调用小球绘制和位置变动函数 for (var i=0;i<arr.length;i++){ arr[i].move(); arr[i].draw(); } },50) </script> </body> </html>
⑶ prototype
每一个函数都有一个默认的属性——prototype，prototype的属性值也是一个对象，
是属性的集合，而prototype对象的默认属性只有一个——constructor，指向函数本身，
但是可以通过prototype自定义添加函数的属性。
语法示例：Fn.prototype.peo='str' || fn(){} ;
3.图片无缝滚动
该实例主要利用图像切片方法，通过图像坐标变化实现滚动效果。
代码示例：
<html lang="en"> <head> <meta charset="UTF-8"> <title>canvas9图片无缝滚动</title> </head> <body> <canvas id="canvasImg" width="520" height="780"> 您的浏览器不支持Canvas标签！ </canvas> <script> var canvas=document.getElementById('canvasImg'); var ctx=canvas.getContext('2d'); var imgObj={ 'rot1':'../Images/rotation01.jpg', 'rot2':'../Images/rotation02.jpg', 'rot3':'../Images/rotation03.jpg', } var imgLoadObj={}; var flag=0; for (var i in imgObj){ var img=new Image(); //生成图片对象实例 img.src=imgObj[i]; imgLoadObj[i]=img; //创建图片对象集合 img.onload=function () { flag++; if (flag==Object.keys(imgObj).length){ rotate(imgLoadObj); //图片全部加载完成后，调用图片滚动方法 // console.log(imgLoadObj); } } } function rotate(imgLoadObj) { var x=0; var timer=setInterval(function () { ctx.clearRect(0,0,canvas.width,canvas.height); x--; if (x<-1560){ x = 0; } ctx.drawImage(imgLoadObj['rot3'],0,0); ctx.drawImage(imgLoadObj['rot2'],0,0); ctx.drawImage(imgLoadObj['rot1'],x,0); if (x<0){ ctx.drawImage(imgLoadObj['rot2'],0,0,-x,780,520+x,0,-x,780); } if (x<-520){ ctx.drawImage(imgLoadObj['rot3'],0,0,-x-520,780,1040+x,0,-x-520,780); } if (x<-1040){ ctx.drawImage(imgLoadObj['rot1'],0,0,-x-1040,780,1560+x,0,-x-1040,780); } },10) } </script> </body> </html>
