小程序之H5+JS实现鼠标泡泡效果 - 技术分享 - 志盟培训
首页技术分享 小程序之H5+JS实现鼠标泡泡效果

小程序之H5+JS实现鼠标泡泡效果

更新时间:2017-06-19      作者:陈老师       阅读:393

预览效果:


实现原理:

利用H5的canvas元素和2D环境,配合JS的面相对象的思想,在网页上创建一块画布,然后鼠标移动时触发事件,对应的处理函数产生圈圈,最后利用定时器将所有的圈圈都自动变小和消失,从而达到鼠标移动泡泡,还能自动消失的效果。


设计思路和核心代码:

1)创建一个canvas元素,这样就有一个可以绘图的画布了

<canvas id="mycanvas" width="800" height="600"></canvas>

2)通过JS代码获取canvas元素

document.getElementById("mycanvas");

3)获取2D环境对象

mycanvas.getContext("2d");

4)设计一个模拟泡泡的Circle类,封装属性:圆心坐标(x, y),半径r,自动偏移差offsetX,offsetY,封装方法:绘制圈圈的方法print,自动缩小和偏移的方法update。

     //圆形类

function Circle(x,y,r,color){

     this.x = x;

     this.y = y;

     this.r = r;

     //...

//绘制

Circle.prototype.print = function(){...};

//更新

Circle.prototype.update = function(){...};

5)绑定鼠标移动事件,每次移动创建一个圈圈对象

     mycanvas.onmousemove = function(event){

new Circle(event.clientX,event.clientY,30,"orange");

}

6)设计一个定时器,清空画布,然后遍历存放所有圈圈的数组,让每个圈圈都变小和偏移,最后将存在的圈圈绘制出来。

//设置定时器每20毫秒更新和绘制

setInterval(function(){

       ctx.clearRect(0, 0, 1000, 600)

       for (vari = 0; i<circleArr.length; i++) {

                circleArr[i].update() &&circleArr[i].print();

       };

},20);


程序源码:

<!DOCTYPE html>

<html>

<head>

        <meta charset="utf-8">

        <title>移动鼠标产生泡泡</title>

        <style type="text/css">

                canvas{

                border: 1px solid #000;

                }

        </style>

</head>

<body>

        <canvas id="mycanvas" width="800" height="600"></canvas>

        <script type="text/javascript">

             varmycanvas = document.getElementById("mycanvas");

             //创建一个数组

             varcircleArr = [];

            //鼠标移动事件

            mycanvas.onmousemove = function(event){

            new Circle(event.clientX,event.clientY,30,"orange");

            }

            varctx = mycanvas.getContext("2d");

            //圆形类

           function Circle(x,y,r,color){

           this.x = x;

           this.y = y;

           this.r = r;

           // 颜色的取值范围

           this.color = "rgb("+ (parseInt(Math.random() * 240 ) + 9) + ","+   (parseInt(Math.random() * 220 )+18) +",203)";

          //随机方向

         this.dx = Math.random() * 10 - 5;

         this.dy = Math.random() * 10 - 5;

         //往数组中push自己

         circleArr.push(this);

         }

         //绘制

        Circle.prototype.print = function(){

        //新建一条路径

        ctx.beginPath();

        //创建一个圆

        ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, true);

        //设置样式颜色

        ctx.fillStyle = this.color;

        //通过填充路径的内容区域生成实心的图形

       ctx.fill();

       }


       //更新

      Circle.prototype.update = function(){

      this.x += this.dx;

      this.y += this.dy;

      this.r--;

      if(this.r< 0){

      for (vari = 0; i<circleArr.length; i++) {

      if (circleArr[i] === this) {

      circleArr.splice(i,1);

      };

      }

      return false;

      }

      return true;

      }

     //设置定时器每20毫秒更新和绘制

     setInterval(function(){

     ctx.clearRect(0, 0, 1000, 600)

     for (vari = 0; i<circleArr.length; i++) {

     circleArr[i].update() &&circleArr[i].print();

     };

     },20);

     </script>

</body>

</html>

在线报名

志盟科技上海招聘

在线报名 联系我们

志盟科技深圳招聘

在线报名 联系我们

志盟科技北京招聘

在线报名 联系我们
联系我们

咨询热线:

咨询 QQ:517578         

就业学员

  • 姓名:郭凡凡 
    院校:阜阳师范学院
    就职:佳戴
    职位:软件工程师
    月薪:10000

  • 姓名:陈祥龙 
    院校:中北大学
    就职:美囤妈妈
    职位:软件工程师
    月薪:9000

  • 姓名:陈建伟
    院校:南昌航空大学
    就职:SONY
    职位:嵌入式工程师
    月薪:8000

×
×
  • *真实姓名
  • *联系手机
  • *上课地址
  •    QQ号码

温馨提示:请保持手机畅通,咨询老师将为您提供专属的一对一报名服务。

×
  • *真实姓名
  • *联系手机
  • *联系邮箱
  • * QQ号码

温馨提示:请保持手机畅通,咨询老师将为您提供专属的一对一的服务。

本站由 宽敬科技——创新企业的建站运营顾问 提供支持