×

输入文字canvas离子动画

作者:abc1232018.06.06来源:Web前端之家浏览:8604评论:0
关键词:H5canvas动画

输入文字canvas离子动画,一起来玩下吧

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body,html{
            font-family:"Microsoft Yahei";
        }
        #can{
            display:block;
            margin:0 auto;
        }
        #wrap{
            width:500px;
            height:100px;
            margin:0 auto;
            text-align:center;
        }
    </style>
 </head>
 <body>
    <canvas id="can" width="1000" height="500">浏览器不支持canvas</canvas>
    <div id="wrap">
        <input type="text" id="text" value="人决定一切" width="80px"><input type="submit" id="submit">
    </div>

    <script type="text/javascript">
        window.onload = function(){
            var submitDom = document.getElementById("submit");
            var textDom = document.getElementById("text");
            var can = document.getElementById("can");
            var ctx = can.getContext("2d");

            var textVal = "";
            var initz = 250;
            var thisTIme = null;
            var animTime = null;
            var grains = [];

            function initAnimate(){
                grains = [];
                textVal = textDom.value;
                drawText(textVal);
                var imgDate = ctx.getImageData(0,0,can.width,can.height);
                ctx.clearRect(0,0,can.width , can.height);
                for(var i=0;i<imgDate.width;i+=6){
                    for(var j=0;j<imgDate.height;j+=6){
                        var index = (j*imgDate.width + i)*4;
                        if(imgDate.data[index]>128){
                            var grain = new Grain(i,j,0,3);
                            grains.push(grain);
                        }
                    }
                }
                animate();
            }

            var lock = true;
            var pause = false;

            /*
                this.x = Math.random()*can.width;//x轴坐标
                this.y = Math.random()*can.height;//y轴坐标
                this.z = Math.random()*initz*2;//z轴坐标
                this.ix = Math.random()*can.width;//初始化x轴坐标
                this.iy = Math.random()*can.height;//初始化y轴坐标
                this.iz = Math.random()*initz*2;//初始化z轴坐标
                this.tx = x;//目标x轴坐标
                this.ty = y;//目标y轴坐标
                this.tz = z;//目标z轴坐标
            */

            function animate(){
                thisTIme = new Date();
                ctx.clearRect(0,0,can.width,can.height);
                grains.forEach(function(item){
                    if(lock){
                        if(Math.abs(item.tx-item.x)<0.1&&Math.abs(item.ty-item.y)<0.1&&Math.abs(item.tz-item.z)<0.1){
                            item.x = item.tx;
                            item.y = item.ty;
                            item.z = item.tz;
                            if(thisTIme-animTime>300) lock = false;
                        } else{
                            item.x += (item.tx-item.x)*0.1;
                            item.y += (item.ty-item.y)*0.1;
                            item.z += (item.tz-item.z)*0.1;
                            animTime = new Date();
                        }
                    }else{
                        if(Math.abs(item.ix-item.x)<0.1&&Math.abs(item.iy-item.y)<0.1&&Math.abs(item.iz-item.z)<0.1){
                            item.x = item.ix;
                            item.y = item.iy;
                            item.z = item.iz;
                            pause = true;
                            console.log("执行完毕!");
                        } else{
                            item.x += (item.ix-item.x)*0.1;
                            item.y += (item.iy-item.y)*0.1;
                            item.z += (item.iz-item.z)*0.1;
                            pause = false;
                        }
                    }
                    item.draw();
                })

                 if(!pause) {
                    if("requestAnimationFrame" in window){
                        requestAnimationFrame(animate);
                    }
                    else if("webkitRequestAnimationFrame" in window){
                        webkitRequestAnimationFrame(animate);
                    }
                    else if("msRequestAnimationFrame" in window){
                        msRequestAnimationFrame(animate);
                    }
                    else if("mozRequestAnimationFrame" in window){
                        mozRequestAnimationFrame(animate);
                    }
                }
            }

            function Grain(x,y,z,r){
                this.x = Math.random()*can.width;//x轴坐标
                this.y = Math.random()*can.height;//y轴坐标
                this.z = Math.random()*initz*2-initz;//z轴坐标
                this.ix = Math.random()*can.width;//初始化x轴坐标
                this.iy = Math.random()*can.height;//初始化y轴坐标
                this.iz = Math.random()*initz*2-initz;//初始化z轴坐标
                this.tx = x;//目标x轴坐标
                this.ty = y;//目标y轴坐标
                this.tz = 0;
                this.r = r;//粒子半径
            }

            Grain.prototype = {
                draw : function(){
                    ctx.save();
                    ctx.beginPath();
                    var scale = initz/(initz + this.z);
                    ctx.fillStyle = "rgba(50,50,50,"+ scale +")";
                    ctx.arc(can.width/2 + (this.x-can.width/2)*scale , can.height/2 + (this.y-can.height/2) * scale, this.r*scale , 0 , 2*Math.PI);
                    ctx.closePath();
                    ctx.fill();
                    ctx.restore();
                }
            }

            function drawText(text){
                ctx.save();
                ctx.font = "200px 微软雅黑 bold";
                ctx.fillStyle = "rgba(168,168,168,1)";
                ctx.textAlign = "center"
                ctx.textBaseLine = "middle";
                ctx.fillText(text,can.width/2,can.height/2);
                ctx.restore();
            }

            submitDom.onclick = function(){
                initAnimate();
                lock = true;
                pause = false;
            }

            initAnimate();
        }
    </script>
</body>
</html>


温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/canvas129312-93.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 大吨位油缸

    谷歌浏览器使用起来很快,没有乱七八糟的插件。www.sdlyxt.com...

  • Web前端之家

    可以加Q群...

  • 访客

    JS点击锚点实现平滑滚动能写一个备注呗,有点看不懂,谢谢...

  • alice

    试用了下,vee-validate挺好用的!...

  • 访客

    封装思路跟原生javascript基本差不多。...

  • qianduan

    这个跟H5做的很像,看上去用react实现起来要简单些。...

  • qianduan

    YYDS的文章,收藏了。...

  • 访客

    红红火火恍恍惚惚...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria