canvas简单的404文本粒子页面效果

2018-10-18 11:15:04 来源：canvas简单的404文本粒子页面效果分类：HTML5 阅读(1656) 评论(0) 作者：全栈工程师

效果预览，可变换不同颜色

完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
    overflow: hidden;
}</style>
</head>
<body>
<canvas id="test"></canvas>

<script>
'use strict';

var canvas = document.getElementById('test'),
    ctx = canvas.getContext('2d'),
    height = undefined,
    width = undefined,
    particles = undefined;

var step = 10;

var init = function init() {
    height = window.innerHeight;
    width = window.innerWidth;

    canvas.height = height;
    canvas.width = width;

    var fontSize = Math.min(height, width) / 2;

    ctx.font = fontSize + 'px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('404', width / 2, height / 2 + fontSize / 4);

    var data = ctx.getImageData(0, 0, width, height).data;
    var data32 = new Uint32Array(data.buffer);

    particles = [];

    for (var x = 0; x < width; x += step) {
        for (var y = 0; y < height; y += step) {
            var color = data32[y * width + x];

            if (color != 0) {
                particles.push({ x: x, y: y });
            }
        }
    }
};

init();

window.onresize = init;

var counter = 0;

function drawIt() {
    ctx.fillStyle = '#1c1c1c';
    ctx.fillRect(0, 0, width, height);

    for (var i = 0; i < particles.length; i++) {
        var dX = step / 10 * Math.cos(i * 11 + counter),
            dY = step / 10 * Math.sin(i * 13 + counter),
            radius = step * 0.5 + dX - dY;

        ctx.beginPath();
        ctx.arc(particles[i].x + dX, particles[i].y + dY, radius, 0, 2 * Math.PI, false);

        var color = (counter + 15 * (5 + dX - dY)) % 360;

        ctx.fillStyle = 'hsl(' + color + ', 100%, 50%)';
        ctx.fill();
    }

    counter += .1;

    requestAnimationFrame(drawIt);
}

drawIt();
</script>

</body>
</html>

本文出处：来自互联网信息共享，请勿相信收费信息站长资源 » canvas简单的404文本粒子页面效果

标签：404页面效果 Canvas em ip

相关推荐

评论抢沙发

评论前必须登录！

立即登录注册