热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Canvas完成炫丽的粒子活动结果(粒子天生笔墨)

没有最好,只要更好,如题所示,这篇文章只如果分享一个用Canvas来完成的粒子活动结果。觉得有点题目党了,但换个角度,勉勉强强算是炫丽吧,虽然颜色上与炫丽无关,但活动结果上照样算得

没有最好,只要更好,如题所示,这篇文章只如果分享一个用 Canvas 来完成的粒子活动结果。觉得有点题目党了,但换个角度,勉勉强强算是炫丽吧,虽然颜色上与炫丽无关,但活动结果上照样算得上有点点炫的。不论怎样,我们照样最先这个所谓的炫丽结果吧!

直接上代码 ,不懂能够看代码解释。预计就会看邃晓也许的思绪了。

html 代码











散开范例:


散开结果(对归位有用):









HTML 代码不多,只如果几个操纵元素。这里一看就邃晓。不费过量口舌。我们来看看本文的主角 Javascript 代码,不过,在看代码前,我们无妨先听听完成这个结果的思绪:

  • 起首,我们得先天生一堆群众演员(粒子);
  • 把每一个粒子的相干参数挂到本身的一些属性上,由于第个粒子都邑有本身的活动轨迹;
  • 接着得让它们各自活动起来。活动有两种(自在活动和天生笔墨的活动);

Javascript 代码中使用了三个 Canvas 画布,this.iCanvas(主场)、this.iCanvasCalculate(用来盘算笔墨宽度)、this.iCanvasPixel(用于画出笔墨,并从中获得笔墨对应的像素点的位置坐标)。
this.iCanvasCalculate 和 this.iCanvasPixel 这两个无需在页面中显示出来,只是辅佐作用。
下面就献上棒棒的 JS 完成代码

function Circle() {
var This = this;
this.init();
this.generalRandomParam();
this.drawCircles();
this.ballAnimate();
this.getUserText();
// 窗口转变大小后,生盘算并猎取画面
window.Onresize= function(){
This.stateW = document.body.offsetWidth;
This.stateH = document.body.offsetHeight;
This.iCanvasW = This.iCanvas.width = This.stateW;
This.iCanvasH = This.iCanvas.height = This.stateH;
This.ctx = This.iCanvas.getContext("2d");
}
}
// 初始化
Circle.prototype.init = function(){
//父元素宽高
this.stateW = document.body.offsetWidth;
this.stateH = document.body.offsetHeight;
this.iCanvas = document.createElement("canvas");
// 设置Canvas 与父元素同宽高
this.iCanvasW = this.iCanvas.width = this.stateW;
this.iCanvasH = this.iCanvas.height = this.stateH;
// 猎取 2d 绘画环境
this.ctx = this.iCanvas.getContext("2d");
// 插进去到 body 元素中
document.body.appendChild(this.iCanvas);
this.iCanvasCalculate = document.createElement("canvas");
// 用于保留盘算笔墨宽度的画布
this.mCtx = this.iCanvasCalculate.getContext("2d");
this.mCtx.fOnt= "128px 微软雅黑";
this.iCanvasPixel = document.createElement("canvas");
this.iCanvasPixel.setAttribute("style","position:absolute;top:0;left:0;");
this.pCtx = null; // 用于绘画笔墨的画布
// 随机天生圆的数目
this.ballNumber = ramdomNumber(1000, 2000);
// 保留一切小球的数组
this.balls = [];
// 保留动画中末了一个住手活动的小球
this.animte = null;
this.imageData = null;
this.textWidth = 0; // 保留天生笔墨的宽度
this.textHeight = 150; // 保留天生笔墨的高度
this.inputText = ""; // 保留用户输入的内容
this.actiOnCount= 0;
this.ballActor = []; // 保留天生笔墨的粒子
this.actorNumber = 0; // 保留天生笔墨的粒子数目
this.backType = "back"; // 归位
this.backDynamics = ""; // 动画结果
this.isPlay = false; // 标识(在天生笔墨过程当中,不能再天生)
}
// 衬着出一切圆
Circle.prototype.drawCircles = function () {
for(var i=0;i this.renderBall(this.balls[0]);
}
}
// 猎取用户输入笔墨
Circle.prototype.getUserText = function(){
This = this; // 保留 this 指向
ipu = document.getElementById("input-text");
ipu.addEventListener("keydown",function(event){
if(event.which === 13){ // 如果是回车键
ipu.value = ipu.value.trim(); // 去头尾空格
var pat = /[\u4e00-\u9fa5]/; // 中文推断
var isChinese = pat.test(ipu.value);
if(ipu.value.length !=0 && isChinese){
This.inputText = ipu.value;
}else{
alert("请输入汉字");
return;
}
if(This.isPlay){
return
}
This.getAnimateType();
This.getTextPixel();
This.isPlay = true;
}
});
}
// 盘算笔墨的宽
Circle.prototype.calculateTextWidth = function () {
this.textWidth = this.mCtx.measureText(this.inputText).width;
}
// 猎取笔墨像素点
Circle.prototype.getTextPixel = function () {
if(this.pCtx){
this.pCtx.clearRect(0,0,this.textWidth,this.textHeight);
}
this.calculateTextWidth(this.inputText);
this.iCanvasPixel.width = this.textWidth;
this.iCanvasPixel.height = this.textHeight;
this.pCtx = this.iCanvasPixel.getContext("2d");
this.pCtx.fOnt= "128px 微软雅黑";
this.pCtx.fillStyle = "#FF0000";
this.pCtx.textBaseline = "botom";
this.pCtx.fillText(this.inputText,0,110);
this.imageData = this.pCtx.getImageData(0,0,this.textWidth,this.textHeight).data;
this.getTextPixelPosition(this.textWidth,this.textHeight);
}
// 猎取笔墨粒子像素点位置
Circle.prototype.getTextPixelPosition = function (width,height) {
var left = (this.iCanvasW - width)/2;
var top = (this.iCanvasH - height)/2;
var space = 4;
this.actiOnCount= 0;
for(var i=0;i for(var j=0;j var index = j*space+i*this.textWidth*4;
if(this.imageData[index] == 255){
if(this.actionCount this.balls[this.actionCount].status = 1;
this.balls[this.actionCount].targetX = left+j;
this.balls[this.actionCount].targetY = top+i;
this.balls[this.actionCount].backX = this.balls[this.actionCount].x;
this.balls[this.actionCount].backY = this.balls[this.actionCount].y;
this.ballActor.push(this.balls[this.actionCount]);
this.actionCount++;
}
}
}
this.actorNumber = this.ballActor.length;
}
this.animateToText();
}
// 粒子活动到指定位置
Circle.prototype.animateToText = function(){
for(var i=0;i dynamics.animate(This.ballActor[i], {
x: this.ballActor[i].targetX,
y: this.ballActor[i].targetY
},{
type: dynamics.easeIn,
duration: 1024,
});
}
setTimeout(function(){
This.ballbackType();
},3000);
}
// 粒子原路返回
Circle.prototype.ballBackPosition = function(){
for(var i=0;i var ball = This.ballActor[i];
dynamics.animate(ball, {
x: ball.backX,
y: ball.backY
},{
type: dynamics[this.backDynamics],
duration: 991,
complete:this.changeStatus(ball)
});
}
}
// 猎取范例|动画结果
Circle.prototype.getAnimateType = function() {
var selectType = document.getElementById("selectType");
var selectDynamics = document.getElementById("selectDynamics");
this.backType = selectType.options[selectType.options.selectedIndex].value;
this.backDynamics = selectDynamics.options[selectDynamics.options.selectedIndex].value;
}
// 复位散开
Circle.prototype.ballbackType = function(){
if(this.backType == "back"){
this.ballBackPosition();
}else{
this.ballAutoPosition();
}
this.ballActor = [];
}
// 随机散开
Circle.prototype.ballAutoPosition = function(ball){
for(var i=0;i this.changeStatus(this.ballActor[i])
}
}
// 变动小球状况
Circle.prototype.changeStatus = function(ball){
ball.status = 0;
if(this.isPlay == true){
this.isPlay = false;
}
}
// 随机天生每一个圆的相干参数
Circle.prototype.generalRandomParam = function(){
for(var i=0;i var ball = {};
ball.size = 1; // 随机天生圆半径
// 随机天生圆心 x 坐标
ball.x = ramdomNumber(0+ball.size, this.iCanvasW-ball.size);
ball.y = ramdomNumber(0+ball.size, this.iCanvasH-ball.size);
ball.speedX = ramdomNumber(-1, 1);
ball.speedY = ramdomNumber(-1, 1);
this.balls.push(ball);
ball.status = 0;
ball.targetX = 0;
ball.targetY = 0;
ball.backX = 0;
ball.backY = 0;
}
}
// 转变圆的位置
Circle.prototype.changeposition = function(){
for(var i=0;i if( this.balls[i].status == 0){
this.balls[i].x += this.balls[i].speedX;
this.balls[i].y += this.balls[i].speedY;
}
}
}
// 画圆
Circle.prototype.renderBall = function(ball){
this.ctx.fillStyle = "#fff";
this.ctx.beginPath(); // 这个一定要加
this.ctx.arc(ball.x, ball.y, ball.size, 0, 2 * Math.PI);
this.ctx.closePath(); // 这个一定要加
this.ctx.fill();
}
// 小球碰撞推断
Circle.prototype.collision = function(ball){
for(var i=0;i if(ball.x>this.iCanvasW-ball.size || ball.x if(ball.x>this.iCanvasW-ball.size){
ball.x = this.iCanvasW-ball.size;
}else{
ball.x = ball.size;
}
ball.speedX = - ball.speedX;
}
if(ball.y>this.iCanvasH-ball.size || ball.y if(ball.y>this.iCanvasH-ball.size){
ball.y = this.iCanvasH-ball.size;
}else{
ball.y = ball.size;
}
ball.speedY = - ball.speedY;
}
}
}
// 最先动画
Circle.prototype.ballAnimate = function(){
var This = this;
var animateFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
(function move(){
animte = animateFrame(move);
This.ctx.clearRect(0, 0, This.iCanvasW, This.iCanvasH);
This.changeposition();
for(var i=0;i This.collision(This.balls[i]);
This.renderBall(This.balls[i]);
}
})();
}
// 天生一个随机数
function ramdomNumber(min, max) {
return Math.random() * (max - min) + min;
}

看了代码预计也只是内心炫了一下,也没有让你想把这个东西做出来的欲望,为此我晓得必须得让你眼睛心悦诚服才行。在线 DEMO: 动感的粒子示例。

人无完人,代码也一样。看起来运转顺畅的代码也或多或少有一些瑕疵,日前这个结果还只支撑中文。英文的话,我得再勤奋一把,不论怎样,英文背面肯定是会到场来的,只是时间问题了。另有代码顶用于标记是不是可再次实行天生笔墨的 属性:this.isPlay ,照样一点瑕疵,this.isPlay 的状况变动没有正确的在粒子归位的那一霎时变动,而是提早变动了状况。但这个状况不会影响本例子结果的完全完成。

这个例子顶用到了 dynamics.js 库,主如果用到它内里的一些活动函数,让粒子动起来更动人一些,仅此而已。


推荐阅读
  • 在处理 XML 数据时,如果需要解析 `` 标签的内容,可以采用 Pull 解析方法。Pull 解析是一种高效的 XML 解析方式,适用于流式数据处理。具体实现中,可以通过 Java 的 `XmlPullParser` 或其他类似的库来逐步读取和解析 XML 文档中的 `` 元素。这样不仅能够提高解析效率,还能减少内存占用。本文将详细介绍如何使用 Pull 解析方法来提取 `` 标签的内容,并提供一个示例代码,帮助开发者快速解决问题。 ... [详细]
  • 本文介绍如何使用OpenCV和线性支持向量机(SVM)模型来开发一个简单的人脸识别系统,特别关注在只有一个用户数据集时的处理方法。 ... [详细]
  • 使用jqTransform插件美化表单
    jqTransform 是由 DFC Engineering 开发的一款 jQuery 插件,专用于美化表单元素,操作简便,能够美化包括输入框、单选按钮、多行文本域、下拉选择框和复选框在内的所有表单元素。 ... [详细]
  • [转]doc,ppt,xls文件格式转PDF格式http:blog.csdn.netlee353086articledetails7920355确实好用。需要注意的是#import ... [详细]
  • php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]
  • 大类|电阻器_使用Requests、Etree、BeautifulSoup、Pandas和Path库进行数据抓取与处理 | 将指定区域内容保存为HTML和Excel格式
    大类|电阻器_使用Requests、Etree、BeautifulSoup、Pandas和Path库进行数据抓取与处理 | 将指定区域内容保存为HTML和Excel格式 ... [详细]
  • 题目《BZOJ2654: Tree》的时间限制为30秒,内存限制为512MB。该问题通过结合二分查找和Kruskal算法,提供了一种高效的优化解决方案。具体而言,利用二分查找缩小解的范围,再通过Kruskal算法构建最小生成树,从而在复杂度上实现了显著的优化。此方法不仅提高了算法的效率,还确保了在大规模数据集上的稳定性能。 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • 在 LeetCode 的“有效回文串 II”问题中,给定一个非空字符串 `s`,允许删除最多一个字符。本篇深入解析了如何判断删除一个字符后,字符串是否能成为回文串,并提出了高效的优化算法。通过详细的分析和代码实现,本文提供了多种解决方案,帮助读者更好地理解和应用这一算法。 ... [详细]
  • 属性类 `Properties` 是 `Hashtable` 类的子类,用于存储键值对形式的数据。该类在 Java 中广泛应用于配置文件的读取与写入,支持字符串类型的键和值。通过 `Properties` 类,开发者可以方便地进行配置信息的管理,确保应用程序的灵活性和可维护性。此外,`Properties` 类还提供了加载和保存属性文件的方法,使其在实际开发中具有较高的实用价值。 ... [详细]
  • 帝国CMS中的信息归档功能详解及其重要性
    本文详细解析了帝国CMS中的信息归档功能,并探讨了其在内容管理中的重要性。通过归档功能,用户可以有效地管理和组织大量内容,提高网站的运行效率和用户体验。此外,文章还介绍了如何利用该功能进行数据备份和恢复,确保网站数据的安全性和完整性。 ... [详细]
  • 使用Maven JAR插件将单个或多个文件及其依赖项合并为一个可引用的JAR包
    本文介绍了如何利用Maven中的maven-assembly-plugin插件将单个或多个Java文件及其依赖项打包成一个可引用的JAR文件。首先,需要创建一个新的Maven项目,并将待打包的Java文件复制到该项目中。通过配置maven-assembly-plugin,可以实现将所有文件及其依赖项合并为一个独立的JAR包,方便在其他项目中引用和使用。此外,该方法还支持自定义装配描述符,以满足不同场景下的需求。 ... [详细]
  • 技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告
    技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ... [详细]
  • 利用 Zend Framework 实现高效邮件发送功能 ... [详细]
  • 在 Vue 项目中,为了提高页面加载速度和优化用户体验,实现图片上传前的压缩处理至关重要。本文介绍了如何通过集成第三方库和自定义组件,有效减小图片文件大小,确保在不影响图像质量的前提下,提升应用性能。 ... [详细]
author-avatar
青春脸001
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有