经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » HTML5 » 查看文章
WEB前端第六十八课——H5新特性：Canvas案例（刮刮乐、小球动画，图片无缝滚动）
来源：cnblogs　　作者：后来喵　　时间：2021/4/19 8:55:01　　对本文有异议

1.刮刮乐

　　案例目标：利用canvas绑定事件，模拟简单刮刮乐程序。

　　案例思路：在canvas画布上引入是否中奖背景图片，然后在图片上覆盖涂层，当鼠标点击

　　　　　　　并移动时擦出路径上的涂层，显示中奖信息。

　　主要事件：onload，onmousedown，onmousemove，onmouseup

　　代码示例：

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Canvas7刮刮乐</title>
  5. </head>
  6. <body>
  7.     <canvas id="canvas7" width="520" height="780">
  8.         "您的浏览器不支持Canvas！"
  9.     </canvas>
  10.     <script>
  11.         var canvas=document.getElementById('canvas7');
  12.         var ctx=canvas.getContext('2d');
  13.  
  14.         var imageArr=['../Images/rotation01.jpg','../Images/rotation02.jpg','../Images/rotation03.jpg'];
  15.         var imgObj={};
  16.         var flag=0;
  17.         for (var i=0;i<imageArr.length;i++){
  18.             var img=new Image();
  19.             img.src=imageArr[i];
  20.             imgObj[i]=img;
  21.             img.onload=function () {
  22.                 flag++                    //确保待图片全部加载完成后调用“lottery()”方法。
  23.                 if (flag==imageArr.length){
  24.                     lottery(imgObj);       //全部图片加载完成后调用函数。
  25.                 }
  26.             }
  27.         }
  28.     //  单独封装随机背景和清除覆盖填充函数
  29.         function lottery(obj) {
  30.             var num=Math.ceil(Math.random()*10);    //创建随机数，通过设置随机数值控制中奖概率
  31.             if (num == 1){
  32.                 canvas.style.background='URL('+obj[0].src+')';
  33.             }else if (num ==2){
  34.                 canvas.style.background='URL('+obj[1].src+')';
  35.             }else {
  36.                 canvas.style.backgroundImage='URL('+obj[2].src+')';
  37.             }
  38.             ctx.fillStyle='lightgray';
  39.             ctx.fillRect(0,0,canvas.width,canvas.height);
  40.         //  创建鼠标点击事件，鼠标移动清除画像填充
  41.             canvas.onmousedown=function () {
  42.                 canvas.onmousemove=function (e) {
  43.                     e = e||window.event;
  44.                     ctx.clearRect(e.offsetX,e.offsetY,25,25);   //利用offset对象定位鼠标轨迹，设定清除范围
  45.                 }
  46.             }
  47.         //  创建鼠标抬起事件，停止鼠标移动事件
  48.             canvas.onmouseup=window.document.onmouseup=function () {
  49.                 canvas.onmousemove=null;
  50.             }
  51.         }
  52.     </script>
  53. </body>
  54. </html>

2.小球动画

　　⑴ 一个小球动画

　　　　代码示例：

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Canvas8小球动画</title>
  5.     <style>
  6.         canvas{
  7.             border: 1px solid #1e7e34;
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.     <canvas height="300" width="600" id="canvasBall" ></canvas>
  13. <script>
  14.     var canvas=document.getElementById('canvasBall');
  15.     var ctx=canvas.getContext('2d');
  16.  
  17.     //定义小球半径
  18.     var r=Math.floor(Math.random()*50)+10;
  19.     //定义小球圆心坐标
  20.     var x=Math.floor(Math.random()*(600-r*2)+r);
  21.     var y=Math.floor(Math.random()*(300-r*2)+r);
  22.     //定义小球随机填充颜色
  23.     var color='rgb('+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+')';
  24.     //定义小球移动速度
  25.     var dx=3;
  26.     var dy=6;
  27.     //实现小球运动效果
  28.     var timer=setInterval(function () {
  29.         ctx.clearRect(0,0,canvas.width,canvas.height);
  30.         x+=dx;
  31.         y+=dy;
  32.         if (x>=600-r){
  33.             dx=-dx;
  34.         }else if (x<=r){
  35.             dx=Math.abs(dx);
  36.         }
  37.         if (y>=300-r){
  38.             dy=-dy;
  39.         }else if (y<=r){
  40.             dy=Math.abs(dy);
  41.         }
  42.         ctx.beginPath();
  43.         ctx.arc(x, y, r, 0,Math.PI*2,false);
  44.         ctx.fillStyle=color;
  45.         ctx.fill();
  46.         ctx.closePath();
  47.     },50)
  48.  
  49. </script>
  50. </body>
  51. </html>

　　⑵ 随机多个小球

　　　　代码示例：

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Canvas8小球动画</title>
  5.     <style>
  6.         canvas{
  7.             border: 1px solid #1e7e34;
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.     <canvas height="300" width="600" id="canvasBall" ></canvas>
  13. <script>
  14.     var canvas=document.getElementById('canvasBall');
  15.     var ctx=canvas.getContext('2d');
  16.  
  17.     //创建生成小球的构造函数。
  18.     function Ball() {
  19.         //定义随机半径
  20.         this.r=Math.ceil((Math.random()*20)+10);
  21.         //定义随机生成圆心坐标
  22.         this.x=Math.ceil(Math.random()*(600-this.r));
  23.         this.y=Math.ceil(Math.random()*(300-this.r));
  24.         //定义小球随机运动速度
  25.         this.dx=Math.ceil(Math.random()*3);
  26.         this.dy=Math.ceil(Math.random()*6);
  27.         //定义小球随机颜色填充（颜色填充值为字符串格式）
  28.         this.color1='rgb('+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+')';
  29. /*      //设置小球随机径向渐变填充
  30.         var radialGradient=ctx.createRadialGradient(this.x, this.y,this.r/4,this.x, this.y, this.r/2);
  31.         radialGradient.addColorStop(0,'white');
  32.         radialGradient.addColorStop(0.5,'yellow');
  33.         radialGradient.addColorStop(1,'red');
  34.         this.color2=radialGradient;*/
  35.     }
  36.     //创建小球运动函数，通过原型定义
  37.     Ball.prototype.move=function () {
  38.         //定义水平方向
  39.         this.x+=this.dx;
  40.         if (this.x>=(600-this.r)){
  41.             this.dx = -this.dx;
  42.         }else if (this.x<=this.r){
  43.             this.dx = Math.abs(this.dx);
  44.         }
  45.         //定义垂直方向
  46.         this.y+=this.dy;
  47.         if (this.y>=(300-this.r)){
  48.             this.dy = -this.dy;
  49.         }else if (this.y<=this.r){
  50.             this.dy = Math.abs(this.dy);
  51.         }
  52.  
  53.     }
  54.     //绘制圆形小球，函数原型上定义
  55.     Ball.prototype.draw=function () {
  56.         ctx.beginPath();
  57.         ctx.fillStyle=this.color1;      //不支持径向渐变效果？？
  58.         ctx.arc(this.x, this.y, this.r, 0,Math.PI*2,false);
  59.         ctx.fill();
  60.         ctx.closePath();
  61.     }
  62.     //执行小球绘制，调用构造函数Ball()
  63.     var arr=[];
  64.     for (var i=0;i<25;i++){
  65.         arr[i]=new Ball();
  66.         console.log(arr[i].color1);
  67.         // console.log(arr[i].color2);
  68.     }
  69.     console.log(arr);
  70.     //通过setInterval方法实现小球运动效果
  71.     var timer=setInterval(function () {
  72.         //清除画布
  73.         ctx.clearRect(0,0,canvas.width,canvas.height);
  74.         //调用小球绘制和位置变动函数
  75.         for (var i=0;i<arr.length;i++){
  76.             arr[i].move();
  77.             arr[i].draw();
  78.         }
  79.     },50)
  80. </script>
  81. </body>
  82. </html>

　　⑶ prototype

　　　　每一个函数都有一个默认的属性——prototype，prototype的属性值也是一个对象，

　　　　是属性的集合，而prototype对象的默认属性只有一个——constructor，指向函数本身，

　　　　但是可以通过prototype自定义添加函数的属性。

　　　　语法示例：Fn.prototype.peo='str' || fn(){} ;

3.图片无缝滚动

　　该实例主要利用图像切片方法，通过图像坐标变化实现滚动效果。

　　代码示例：

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>canvas9图片无缝滚动</title>
  5. </head>
  6. <body>
  7.     <canvas id="canvasImg" width="520" height="780">
  8.         您的浏览器不支持Canvas标签！
  9.     </canvas>
  10.     <script>
  11.         var canvas=document.getElementById('canvasImg');
  12.         var ctx=canvas.getContext('2d');
  13.         var imgObj={
  14.             'rot1':'../Images/rotation01.jpg',
  15.             'rot2':'../Images/rotation02.jpg',
  16.             'rot3':'../Images/rotation03.jpg',
  17.         }
  18.         var imgLoadObj={};
  19.         var flag=0;
  20.         for (var i in imgObj){
  21.             var img=new Image();    //生成图片对象实例
  22.             img.src=imgObj[i];
  23.             imgLoadObj[i]=img;      //创建图片对象集合
  24.             img.onload=function () {
  25.                flag++;
  26.                if (flag==Object.keys(imgObj).length){
  27.                     rotate(imgLoadObj);     //图片全部加载完成后，调用图片滚动方法
  28.                     // console.log(imgLoadObj);
  29.                }
  30.             }
  31.         }
  32.         function rotate(imgLoadObj) {
  33.             var x=0;
  34.             var timer=setInterval(function () {
  35.                 ctx.clearRect(0,0,canvas.width,canvas.height);
  36.                 x--;
  37.                 if (x<-1560){
  38.                     x = 0;
  39.                 }
  40.                 ctx.drawImage(imgLoadObj['rot3'],0,0);
  41.                 ctx.drawImage(imgLoadObj['rot2'],0,0);
  42.                 ctx.drawImage(imgLoadObj['rot1'],x,0);
  43.                 if (x<0){
  44.                     ctx.drawImage(imgLoadObj['rot2'],0,0,-x,780,520+x,0,-x,780);
  45.                 }
  46.                 if (x<-520){
  47.                     ctx.drawImage(imgLoadObj['rot3'],0,0,-x-520,780,1040+x,0,-x-520,780);
  48.                 }
  49.                 if (x<-1040){
  50.                     ctx.drawImage(imgLoadObj['rot1'],0,0,-x-1040,780,1560+x,0,-x-1040,780);
  51.                 }
  52.             },10)
  53.         }
  54.     </script>
  55. </body>
  56. </html>

　　

原文链接：http://www.cnblogs.com/husa/p/14596987.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号