Canvas画图之烟花爆炸demo

效果展示

canvas画图简单的烟花爆炸效果图如下：

思路分析

1.创建canvas元素

2.创建小圆圈对象，因为圆圈都是一组属性相同的数据，所以将实例化的圆圈对象都存储在数组中，方便后边圆圈消失使用splice方法删除数组元素。

注意：设置小圆圈的属性时，小球的颜色，大小(半径)，数量都是不同的，要单独设置随机方法产生，

 //创建小圆圈随机颜色方法this.randomColor = function () {return "#" + parseInt(Math.random() * 16777216).toString(16);  //转换成16进制};//创建随机数的方法this.randomNum = function (min, max) {return Math.random() * max + min;};

3.创建小圆圈产生的方法，传入鼠标坐标的参数，实现鼠标点击位置产生小圆圈的效果

4.创建小圆圈移动的方法，注意三个问题：

(1)圆圈在移动时移动的方向不同,不同的方向可以用随机产生的角度的cos和sin来计算，因为cos和sin出现的结果有正负，也就代表了不同的方向，

(2)小圆圈扩散的距离也不相同，扩散的距离分别计算left值和top值各增大多少，

(3)在移动的过程中，小圆圈也会越来越小,

       //创建小圆圈的方法this.init = function (x, y) {this.color = this.randomColor();this.x = x;     //坐标this.y = y;this.r = this.randomNum(10, 25);       //随机产生半径this.Angle = Math.random() * Math.PI * 2;                 //随机产生的角度this.AngleX=this.randomNum(6, 12)*Math.cos(this.Angle);  //x坐标移动的距离this.AngleY=this.randomNum(6, 12)*Math.sin(this.Angle);  //y坐标移动的距离};//小圆圈移动this.move=function (){this.x+=this.AngleX;this.y+=this.AngleY;this.r-=0.3;        //控制小圆圈的大小this.AngleX*=0.92;  //控制扩散的距离this.AngleY*=0.92;};

5.小圆圈的消失，当半径小于0.3时，用splice方法删除数组元素

 //小圆圈消失function removeBall() {for (var i = 0; i < balls.length; i++) {var b = balls[i];if (b.r < 0.3) {balls.splice(i, 1);i--;}}}

6.在canvas上画圆圈，这个方法的调用要放在计时器中

 function Draw() {for (var i = 0; i < balls.length; i++) {var b = balls[i];content2d.beginPath();content2d.fillStyle = b.color;content2d.arc(b.x, b.y, b.r, 0, Math.PI * 2);content2d.fill();content2d.closePath();b.move();  //画好后要移动}}

全部代码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}html, body {width: 100%;height: 100%;background-color: black;overflow: hidden;}</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>/*以对象的实例  *///创建canvas元素var canvas = document.getElementById("canvas");canvas.width = window.innerWidth;canvas.height = window.innerHeight;var content2d = canvas.getContext("2d");var balls = [];  //存储小球对象//创建球球对象function ball() {this.color = null;this.r = null;this.Angle = null;this.x = null;this.y = null;this.AngleX = null;this.AngleY = null;//创建小球的方法this.init = function (x, y) {this.color = this.randomColor();this.x = x;     //坐标this.y = y;this.r = this.randomNum(10, 25);this.Angle = Math.random() * Math.PI * 2;                 //随机产生的角度this.AngleX = this.randomNum(6, 12) * Math.cos(this.Angle);  //x坐标移动的距离this.AngleY = this.randomNum(6, 12) * Math.sin(this.Angle);  //y坐标移动的距离};//小球移动this.move = function () {this.x += this.AngleX;this.y += this.AngleY;this.r -= 0.3;this.AngleX *= 0.92;  //控制扩散的距离this.AngleY *= 0.92;};//创建小球随机颜色方法this.randomColor = function () {return "#" + parseInt(Math.random() * 16777216).toString(16);};//创建随机数的方法this.randomNum = function (min, max) {return Math.random() * max + min;};}//实例化球球function createBall(x, y) {var count = parseInt(Math.random() * 30 + 10);for (var i = 0; i < count; i++) {var b = new ball();b.init(x, y);balls.push(b);}}//在canvas上画球球function Draw() {for (var i = 0; i < balls.length; i++) {var b = balls[i];content2d.beginPath();content2d.fillStyle = b.color;content2d.arc(b.x, b.y, b.r, 0, Math.PI * 2);content2d.fill();content2d.closePath();b.move();  //画好后要移动}}//小球消失function removeBall() {for (var i = 0; i < balls.length; i++) {var b = balls[i];if (b.r < 0.3) {balls.splice(i, 1);i--;}}}//鼠标事件canvas.onmouseup = function (e) {var x = e.pageX;var y = e.pageY;createBall(x, y);};loop();function loop() {//清除整个画布content2d.clearRect(0, 0, canvas.width, canvas.height);Draw();removeBall();window.requestAnimationFrame(loop);/* 告诉浏览器您要执行的动画并且请求浏览器的在下一个动画帧重绘窗口,方法在浏览器重绘之前作为一个回调函数被调用,就是告诉浏览器在刷新屏幕的时候，调用这个方法*/}
</script>
</body>
</html>

Canvas画图之烟花爆炸demo相关推荐

html5 canvas 烟花,html5 canvas酷炫的烟花爆炸动画特效
特效描述:html5canvas 酷炫的烟花爆炸动画特效.html5点击页面烟花爆炸动画,3D烟花动画,酷炫的烟花特效. 代码结构 1. 引入JS 2. HTML代码点击页面 (function( ...
可扩展面向对象的canvas画图程序
面向对象的canvas画图程序项目简介整个项目分为两大部分场景场景负责canvas控制,事件监听,动画处理精灵精灵则指的是每一种可以绘制的canvas元素 Demo演示地址 Demo为最新 ...
鼠标点击烟花爆炸效果
鼠标点击烟花爆炸效果效果预览: 预览结果一. 快速使用(引用我创建好的anime.min.js文件) <canvas class="fireworks"style=&qu ...
仿消灭星星烟花爆炸效果
烟花效果,可以改变参数和图片改变烟花效果. 1.大烟花爆炸效果如下 2.小烟花爆炸效果如下 3.代码如下 3.1烟花粒子元素 import android.graphics.Bitmap; publi ...
仿抖音短视频系统源码烟花爆炸动效
越来越多的地方都会用到烟花效果了,而且很多游戏都会有类似通关之后的爆炸特效,今天来分享一下烟花爆炸的动效.升空的动画就不用写了,主要就写个view的位移,重点就是四散开来的爆炸. 下面就来看如何处理的 ...
HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅 ...
html5 canvas 画图移动端出现锯齿毛边的解决方法
html5 canvas 画图移动端出现锯齿毛边的解决方法参考文章: (1)html5 canvas 画图移动端出现锯齿毛边的解决方法 (2)https://www.cnblogs.com/dear ...
小程序---canvas画图，生成分享图片，画图文字换行
小程序目前只支持转发,不支持分享朋友圈,为了能实现分享,很多线上小程序通过生成分享图片,保存到相册来给用户增加分享的可能. 具体思路及简要代码如下: 一:canvas画图drawCanvas:func ...
解决canvas画图模糊的问题
canvas 画图经常发现他是模糊的.解决这个问题主要从两个方面下手. 改变canvas渲染的像素情况:画1像素的线条看起来模糊不清,好像更宽的样子. 解决方案 var ctx = canvas.g ...

Canvas画图之烟花爆炸demo

效果展示

思路分析

全部代码

Canvas画图之烟花爆炸demo相关推荐

最新文章

热门文章