欢迎光临
我的个人博客网站

WEB前端第六十八课——H5新特性:Canvas案例(刮刮乐、小球动画,图片无缝滚动)

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> 

  

赞(0) 打赏
未经允许不得转载:张拓的天空 » WEB前端第六十八课——H5新特性:Canvas案例(刮刮乐、小球动画,图片无缝滚动)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏