Canvas+Javascript实现点击小球的爆炸效果

SAM9029
632 阅读2分钟

Canvas+Javascript实现点击小球的爆炸效果

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

🦖我是Sam9029，一个前端

Sam9029的掘金主页:Sam9029的掘金主页

`🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍

今天兴致高涨，非常想要学习，所以我准备继续写一个小项目

将将将将爆炸小球的效果，我要写这个，（给我来十个，哦打）

将使用 Canvas + JS 来完成这个效果

关于canvas(画布)：HTML5 Canvas | 菜鸟教程 (runoob.com)

其实用的不多，了解一下就可上手该案例效果

以下是需求

需求

  • 点击后有小球出现
    • 以点击为中心弹出小球
    • 小球大小不一
    • 小球的颜色多种多样
    • 小球的运动轨迹四面八方

源码及效果

源码地址：

Canvas+Javascript实现点击小球的爆炸效果 - 码上掘金 (juejin.cn)

展示效果：

baozhaExpulsion.gif

代码思路

HTML

  • 很简单，创建一张画布即可
<div id="container">
    <canvas id="canvas"></canvas>
</div>

就是这么简单

CSS

  • 也很简单

  • 清除 通用样式

  • 设定 画布的大小

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    /*             background-color: black; */
    overflow: hidden;
}
#container{
    width: 80vw;
    height: 60vh;
    border: 1px solid black;
}

JavaScript

好了，要做正事了，let go！

所有的JS 整体代码请看 源码地址，此文分开讲解

主要的三步操作

  • 创建小球 存入 小球数组之中
    • 每次点击的所有小球在一个数组中储存
var balls=[];//存放小球

//创建小球
function createball(X,Y){
    var count=parseInt(Math.random()*30+10);
    for(var i=0;i<count;i++){
        var Ball=new ball();
        Ball.int(X,Y);
        balls.push(Ball);
    }
}
  • 在canvas（画布盒子上）上绘制小球
    • 首先要获取获取画布
var can=document.getElementById("canvas");
var container=document.getElementById("container");
// 使用 盒子  的高宽 作为画布的高宽
can.height=container.offsetHeight;
can.width=container.offsetWidth;
var canvas=can.getContext("2d");

//在canvas上绘制小球
function draw(){
    for(var i=0;i<balls.length;i++){
        var b=balls[i];
        b.move();
        canvas.beginPath();
        canvas.arc(b.x, b.y, b.r,0,Math.PI*2,true);
        canvas.fillStyle= b.color;
        canvas.fill();
        canvas.closePath();

    }
}
  • 小球的消失就直接从数组种移除
//移除小球
function remove(){
    for(var i=0;i<balls.length;i++){
        var b=balls[i];
        if(b.r<0.3){
            balls.splice(i,1);
            i--;
        }
    }
}

  • 给小球设置随机的颜色

  • 设置不同的偏移量，来确保每个小球，往不同的方向上消失

  • 使用流畅的动画JS内置的绘制效果动画刷新API requestAnimationFrame

//每次爆炸都有单独的计时器
time();
function time(){
    canvas.clearRect(0,0,can.width,can.height);
    draw();
    remove();
    window.requestAnimationFrame(time);
}

待改进

  • 自动爆炸效果
    • 如一定时间内爆炸几次，自动展示爆炸效果

急不可癞的我实现了初步的，自动爆炸演示

//自动实现爆炸
function randomLocal(){
  return Math.floor(Math.random()*100)
}
createball(100,100);
setInterval(()=>{
  createball(randomLocal(),randomLocal());
},500)

🦖我是Sam9029，一个前端，坚信应无所往

文章若有错误，敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**

Sam9029的掘金主页:Sam9029的掘金主页

avatar
文章
阅读
粉丝