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

2022 年 9 月 25 日
四川
本文字数：1556 字
阅读完需：约 5 分钟

🦖我是 Sam9029，一个前端
Sam9029 的 infoQ 主页:https://www.infoq.cn/u/sam9029/publish
`🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍

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

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

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

关于 canvas(画布)：HTML5 Canvas | 菜鸟教程 (runoob.com)
其实用的不多，了解一下就可上手该案例效果

以下是需求

需求

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

源码及效果

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

代码思路

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
关于requestAnimationFrameAPI ,请看：
window.requestAnimationFrame - Web API 接口参考 | MDN
此 API 在于使得 canvas 画布上的小球爆炸效果更加的流畅
每次爆炸都有单独的计时器，却报每次的爆炸小球们不会相互影响

//每次爆炸都有单独的计时器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 的 infoQ 主页:https://www.infoq.cn/u/sam9029/publish

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/f41024be02d0a5e66dc0debfc】。文章转载请联系作者。

Sam9029

关注

庸俗 2022.09.03 加入

好色

发布

暂无评论

创作场景

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

需求

源码及效果

代码思路

HTML

CSS

JavaScript

待改进

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

Sam9029

评论

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