炫彩小球案例

Posted 她还会来吗

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了炫彩小球案例相关的知识,希望对你有一定的参考价值。

前言

以下是利用canvas实现炫彩小球的效果,需要利用基础的前端知识,我就来为大家展示一下叭

效果图如下

html

  <body>
    <canvas width="800" height="500"></canvas>
  </body>

css

给画布设置边框样式
 <style>
        canvas
            border: 1px solid #000;
            background-color: #ccc;
          
  </style>

js(重点)

 // 得到画布
    var canvas = document.querySelector('canvas');
    // 获取上下文
    var ctx  = canvas.getContext("2d");
    // 球类
    function Ball(x,y,r)
        this.x = x;
        this.y = y;
        // 初始半径
        this.r = r;
        // 设置随机颜色
        this.color = getColor();
        // 设置行进方向
        this.dx = parseInt(Math.random()*10 - 5);
        // 设置行进方向
        this.dy = parseInt(Math.random()*10 - 5);
        // 将这个小球维护到数组中
        ballArr.push(this);
    
    Ball.prototype.update = function()
        // 小球的运动
        this.x+=this.dx;
        this.y+=this.dy;
        this.r-=0.1;
        if(this.r<0)
        
           this.remove();
        
    
    Ball.prototype.remove = function()
        for(var i = 0;i<ballArr.length;i++)
        
            if(ballArr[i]==this)
            
                ballArr.splice(i,1);
            
        
    
    // 渲染小球
   Ball.prototype.render = function()
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
        ctx.fillStyle=this.color;
        ctx.fill();
    
    // 给小球设置鼠标监听,鼠标移动的过程中创建小球
    canvas.addEventListener('mousemove',function(e)
         new Ball(e.offsetX,e.offsetY,30);
    )
    // 维护小球的数组
    var ballArr = [];
    // 定时器进行动画渲染和更新
    setInterval(function()
        // 动画的逻辑-清屏-更新
        ctx.clearRect(0,0,canvas.width,canvas.height)
        for(var i =0;i<ballArr.length;i++)
          ballArr[i].update();
          if(ballArr[i])
          
            ballArr[i].render();
           
      
    ,10)
    function getColor()
        var array = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e'];
        var color = "#";
        // 采用六进制颜色输出
        for(var i = 0 ;i < 6;i++)
        
            var random = parseInt(Math.random()*array.length);
            // 拼接颜色
            color+=array[random];
        
        return color;
    

结语

初学canvas,还不能实现实现很多炫酷的效果,不过我会努力学习的!!!

  书山有路勤为径,学海无涯苦做舟
                                              ---不知道谁写的(好像是韩愈)

以上是关于炫彩小球案例的主要内容,如果未能解决你的问题,请参考以下文章

5分钟写一个炫彩加载小球

canvas炫彩小球爱心(博客园鼠标点击)

随鼠标动的炫彩小球

超多经典 canvas 实例,动态离子背景移动炫彩小球贪吃蛇坦克大战是男人就下100层心形文字等等等

html鼠标点击出现小球

小球碰撞