前端开发 canvas网页数字特效

网页前端界面开发|前端开发跟网页设计有啥区别|1500个前端开发常用javascript特效

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″ />
    <meta name=”author” content=”” />
    <meta name=”keywords” content=”” />
    <meta name=”description” content=”” />
    <meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=no” />
    <title>h5与前端开发:canvas数字特效</title>
</head>
<body>
    <canvas style=”background:#000″></canvas>
    <script>
        (function () {
            var digit = [
                [//digit 0
                    [0, 1, 1, 1, 1, 1, 0],
                    [1, 1, 1, 1, 1, 1, 1],
                    [1, 1, 0, 0, 0, 1, 1],
                    [1, 1, 0, 0, 0, 1, 1],
                    [1, 1, 0, 0, 0, 1, 1],
                    [1, 1, 0, 0, 0, 1, 1],
                    [1, 1, 0, 0, 0, 1, 1],
                    [1, 1, 0, 0, 0, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1],
                    [0, 1, 1, 1, 1, 1, 0]
                ],
                [//digit 1
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 1, 1, 1, 0, 0],
                    [0, 1, 1, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 0, 0]
                ],
                [//digit 2
                    [0, 0, 1, 1, 1, 0, 0],
                    [0, 1, 1, 0, 1, 1, 0],
                    [1, 1, 0, 0, 0, 1, 1],
                    [0, 0, 0, 0, 0, 1, 1],
                    [0, 0, 0, 0, 1, 1, 0],
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 1, 1, 0, 0, 0],
                    [0, 1, 1, 0, 0, 0, 1],
                    [1, 1, 1, 1, 1, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1]
                ],
                [//digit 3
                    [0, 0, 1, 1, 1, 0, 0],
                    [0, 1, 1, 0, 1, 1, 0],
                    [1, 1, 0, 0, 0, 1, 1],
                    [0, 0, 0, 0, 0, 1, 1],
                    [0, 0, 0, 1, 1, 1, 0],
                    [0, 0, 0, 1, 1, 1, 0],
                    [0, 0, 0, 0, 0, 1, 1],
                    [1, 1, 0, 0, 0, 1, 1],
                    [0, 1, 1, 0, 1, 1, 0],
                    [0, 0, 1, 1, 1, 0, 0]
                ],
                [//digit 4
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 1, 0, 1, 0, 0],
                    [0, 1, 1, 0, 1, 0, 0],
                    [1, 1, 0, 0, 1, 0, 0],
                    [1, 1, 1, 1, 1, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1],
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 0, 0]
                ],
                [//digit 5
                    [0, 1, 1, 1, 1, 1, 0],
                    [0, 1, 1, 1, 1, 1, 0],
                    [0, 1, 1, 0, 0, 0, 0],
                    [0, 1, 1, 1, 1, 0, 0],
                    [0, 0, 0, 0, 1, 1, 0],
                    [0, 0, 0, 0, 0, 1, 1],
                    [0, 0, 0, 0, 0, 1, 1],
                    [0, 0, 0, 0, 1, 1, 0],
                    [0, 1, 1, 0, 1, 1, 0],
                    [0, 1, 1, 1, 1, 0, 0]
                ],
                [//digit 6
                    [0, 0, 1, 1, 1, 0, 0],
                    [0, 1, 1, 0, 1, 1, 0],
                    [0, 1, 1, 0, 0, 0, 0],
                    [0, 1, 1, 0, 0, 0, 0],
                    [0, 1, 1, 1, 1, 1, 0],
                    [0, 1, 1, 0, 1, 1, 0],
                    [0, 1, 1, 0, 0, 1, 1],
                    [0, 1, 1, 0, 0, 1, 1],
                    [0, 1, 1, 0, 1, 1, 0],
                    [0, 0, 1, 1, 1, 0, 0]
                ],
                [//digit 7
                    [1, 1, 1, 1, 1, 1, 0],
                    [1, 1, 1, 1, 1, 1, 0],
                    [0, 0, 0, 0, 1, 1, 0],
                    [0, 0, 0, 0, 1, 1, 0],
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 0, 1, 1, 0, 0, 0],
                    [0, 0, 1, 1, 0, 0, 0],
                    [0, 0, 1, 1, 0, 0, 0],
                    [0, 0, 1, 1, 0, 0, 0]
                ],
                [//digit 8
                    [0, 0, 1, 1, 1, 0, 0],
                    [0, 1, 1, 0, 1, 1, 0],
                    [1, 1, 0, 0, 0, 1, 1],
                    [1, 1, 0, 0, 0, 1, 1],
                    [0, 1, 1, 1, 1, 1, 0],
                    [0, 1, 1, 1, 1, 1, 0],
                    [1, 1, 0, 0, 0, 1, 1],
                    [1, 1, 0, 0, 0, 1, 1],
                    [0, 1, 1, 0, 1, 1, 0],
                    [0, 0, 1, 1, 1, 0, 0]
                ],
                [//digit 9
                    [0, 0, 1, 1, 1, 0, 0],
                    [0, 1, 1, 0, 1, 1, 0],
                    [1, 1, 0, 0, 0, 1, 1],
                    [1, 1, 0, 0, 0, 1, 1],
                    [0, 1, 1, 0, 0, 1, 1],
                    [0, 0, 1, 1, 1, 1, 1],
                    [0, 0, 0, 0, 0, 1, 1],
                    [1, 1, 0, 0, 0, 1, 1],
                    [0, 1, 1, 0, 0, 1, 1],
                    [0, 0, 1, 1, 1, 1, 0]
                ]
            ];
            function Dot(tx, ty, x, y, radius) {
                this.tx = tx;
                this.ty = ty;
                this.x = x;
                this.y = y;
                this._dx = tx – x;
                this._dy = ty – y;
                this.radius = radius;
                // this.speed=0.1;
            }
            Dot.prototype = {
                PI2: Math.PI * 2,
                move: function (t, d) {
                    /*
                     var speed=this.speed,
                         vx=(this.tx-this.x)*speed,
                         vy=(this.ty-this.y)*speed;
                        this.x+=vx;
                        this.y+=vy;
                     if(Math.abs(this.x-this.tx)<0.5&&Math.abs(this.y-this.ty)<0.5){
                         this.x=this.tx;
                         this.y=this.ty;
                         return false;
                     }
                     */
                    if (t > d) {
                        this._x = this.tx;
                        this._y = this.ty;
                        return false;
                    }
                    this._x = this.ease(this.x, this._dx, t, d);
                    this._y = this.ease(this.y, this._dy, t, d);
                    return true;
                },
                draw: function (ctx) {
                    var x = this._x,
                        y = this._y,
                        grd = ctx.createRadialGradient(x, y, this.radius / 2, x, y, this.radius);
                    grd.addColorStop(0, “#FFF”);
                    grd.addColorStop(1, “rgba(255,255,255,0.1)”);
                    ctx.fillStyle = grd;
                    ctx.beginPath();
                    ctx.arc(x, y, this.radius, 0, this.PI2, true);
                    ctx.closePath();
                    ctx.fill();
                },
                ease: function (b, c, t, d) {
                    return (t /= d / 2) < 1 ? c / 2 * t * t + b : -c / 2 * ((–t) * (t – 2) – 1) + b;
                }
            };
            var num = 200 * Math.random() | 0,
                radius = 4,
                duration = 60, //60frams===1秒
                dotSpace = 1,
                numSpace = 5,
                times = 0,
                nums = num.toString().split(“”),
                dots = [],
                i = 0,
                ii = nums.length,
                cvs = document.querySelector(“canvas”),
                width = cvs.width,
                height = cvs.height,
                ctx = cvs.getContext(“2d”);
            for (; i < ii; i++) {
                setDots(nums[i], i, dots, width, height);
            }
            function drawFrame() {
                var i = dots.length;
                ctx.clearRect(0, 0, width, height);
                times++;
                while (i–) {
                    dots[i].move(times, duration);
                    dots[i].draw(ctx);
                }
                requestAnimationFrame(drawFrame);
            }
            drawFrame();
            function setDots(num, i, dots, width, height) {
                var dig = digit[num],
                    y = dig.length,
                    x = dig[0].length,
                    dot_width = (dotSpace + radius) * 2,
                    num_width = dot_width * x,
                    offsetY = dot_width / 2,
                    offsetX = i * (num_width + numSpace) + offsetY;
                j = 0;
                while (y–) {
                    j = x;
                    while (j–) {
                        dig[y][j] && dots.push(new Dot(offsetX + j * dot_width, offsetY + dot_width * y, Math.random() * width, Math.random() * height, radius));
                    }
                }
            }
        })();
    </script>
</body>
</html>

h5动画制作 web前端开发|前端动画都是用什么开发?|前端怎么开发h5动画宣传页面

» 本文来自:前端开发者 » 《前端开发 canvas网页数字特效》
» 本文链接地址:https://www.rokub.com/4305.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!