Canvas realizes dazzling particle motion effects-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Canvas realizes dazzling particle motion effects

小云云

Feb 03, 2018 am 09:50 AM

canvasparticlesports

This article mainly introduces and introduces Canvas to achieve dazzling particle motion effects (particles generate text). The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Go directly to the code. If you don’t understand, you can read the code comments. You will probably understand the general idea.

html Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas 实现炫丽的粒子运动效果-云库前端</title>
<style>
* {
    margin: 0;
    padding: 0;
}
html,
body {
    width: 100%;
    height: 100%;
}
canvas {
    display: block;
    background: #000;
}
body::-webkit-scrollbar{
    display: none;
}
.operator-box{
    position: fixed;
    top: 0;
    left: 50%;
    border: 1px solid #fff;
    background: rgba(255,255,255,0.5);
    padding: 20px 10px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.back-type,.back-animate{
    margin-right: 20px;
}
.flex-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
#input-text{
    line-height: 35px;
    width: 260px;
    height: 35px;
    background: rgba(0, 0, 0,0.7);
    color: #fff;
    font-size: 16px;
    border: none;
    outline: none;
    text-indent: 12px;
    box-shadow: inset 0 0 12px 1px rgba(0,0,0,0.7);
}
#input-text::placeholder{
    color: #ccc;
    line-height: 55px;
    height: 55px;
}
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    padding: 0px 20px 0px 6px;
    height: 35px;
    color: #fff;
    text-align: left;
    background: rgba(0, 0, 0,0.7) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAICAYAAAAx8TU7AAAAOUlEQ…R4gPgWEIMAiOYBCS4C8ZDAIrBq4gigNkztQEFMi6AuQHESAPMeXiEMiWfpAAAAAElFTkSuQmCC) no-repeat 190px 12px;
    background-size: 5px 8px;
    box-shadow: inset 0 0 12px 1px rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<p class="operator-box">
<p class="flex-box">
    <p class="back-type">散开类型：
        <select name="" id="selectType">
            <option value="back">归位</option>
            <option value="auto">随机</option>
        </select>
    </p>
    <p class="back-animate">散开效果（对归位有效）：
       <select class="back-dynamics" id="selectDynamics">
           <option value="spring">dynamics.spring</option>
           <option value="bounce">dynamics.bounce</option>
           <option value="forceWithGravity">dynamics.forceWithGravity</option>
           <option value="gravity">dynamics.gravity</option>
           <option value="easeInOut">dynamics.easeInOut</option>
           <option value="easeIn">dynamics.easeIn</option>
           <option value="easeOut">dynamics.easeOut</option>
           <option value="linear">dynamics.linear</option>
       </select>
    </p>
    <p class="input-box"><input type="text" placeholder="输入汉字后回车" id="input-text"></p>
</p>
</p>
<script src="dynamics.min.js"></script>
<script src="index.js"></script>
<script>
var iCircle = new Circle();
</script>
</body>
</html>

HTML code is not much, just a few operating elements. It’s easy to understand at a glance here. No need to waste too much words. Let’s take a look at the protagonist JavaScript code of this article. However, before looking at the code, we might as well listen to the idea of achieving this effect:

First, we have to generate a bunch of extras ( particles);
Hang the relevant parameters of each particle to some of its own attributes, because every particle will have its own trajectory;
Then you have to let them move individually. There are two types of motion (free motion and text-generated motion);

The JavaScript code uses three Canvas canvases, this.iCanvas (home page), this.iCanvasCalculate (used to calculate Text width), this.iCanvasPixel (used to draw text and obtain the position coordinates of the pixel corresponding to the text).

this.iCanvasCalculate and this.iCanvasPixel do not need to be displayed on the page, they are just auxiliary functions.

The following is a great JS implementation code

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.ballNumber;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<this.textHeight;i+=space){
        for(var j=0;j<this.textWidth;j+=space){
            var index = j*space+i*this.textWidth*4;
            if(this.imageData[index] == 255){
                if(this.actionCount<this.ballNumber){
                    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<This.actorNumber;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<This.actorNumber;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.actorNumber;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<this.ballNumber;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<this.ballNumber;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<this.ballNumber;i++){
       if(ball.x>this.iCanvasW-ball.size || ball.x<ball.size){
            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<ball.size){
            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.ballNumber;i++){
           This.collision(This.balls[i]);
           This.renderBall(This.balls[i]);
        }
    })();
}
// 生成一个随机数
function ramdomNumber(min, max) {
    return Math.random() * (max - min) + min;
}

After reading the code, I guess I just dazzled my heart, and it didn’t make you want to think about this thing. The desire to create it, for this I know it must be convinced by your eyes and mouth. Online DEMO: Dynamic particle example.

No one is perfect, and the same goes for code. It seems that the code that runs smoothly also has some flaws. Currently, this effect only supports Chinese. As for English, I have to work harder. No matter what, English will definitely join later, it’s just a matter of time. There is also the attribute in the code used to mark whether the generated text can be executed again: this.isPlay, which is still a little flaw. The state change of this.isPlay does not change exactly at the moment when the particles return, but changes the state in advance. But this state will not affect the complete implementation of the effect of this example.

This example uses the dynamics.js library, mainly using some motion functions in it to make the particles move more impressively, that's all.

Related recommendations:

Tutorial on using Canvas in HTML5 combined with formulas to draw particle motion_html5 tutorial skills

The above is the detailed content of Canvas realizes dazzling particle motion effects. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

What is CSS flexbox?Apr 30, 2025 pm 03:20 PM

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

How can we make our website responsive using CSS?Apr 30, 2025 pm 03:19 PM

The article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework

What does the CSS box-sizing property do?Apr 30, 2025 pm 03:18 PM

The article discusses the CSS box-sizing property, which controls how element dimensions are calculated. It explains values like content-box, border-box, and padding-box, and their impact on layout design and form alignment.

How can we animate using CSS?Apr 30, 2025 pm 03:17 PM

Article discusses creating animations using CSS, key properties, and combining with JavaScript. Main issue is browser compatibility.

Can we add 3D transformations to our project using CSS?Apr 30, 2025 pm 03:16 PM

Article discusses using CSS for 3D transformations, key properties, browser compatibility, and performance considerations for web projects.(Character count: 159)

How can we add gradients in CSS?Apr 30, 2025 pm 03:15 PM

The article discusses using CSS gradients (linear, radial, repeating) to enhance website visuals, adding depth, focus, and modern aesthetics.

What are pseudo-elements in CSS?Apr 30, 2025 pm 03:14 PM

Article discusses pseudo-elements in CSS, their use in enhancing HTML styling, and differences from pseudo-classes. Provides practical examples.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks agoByDDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks agoByDDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Roblox: Dead Rails - How To Tame Wolves

3 weeks agoByDDD

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks agoByDDD

Hot Tools

SublimeText3 Linux new version

SublimeText3 Linux latest version

Dreamweaver CS6

Visual web development tools

Dreamweaver Mac version

Visual web development tools

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

Hot Topics

1655

1413

1306

1252

1226