<!doctype html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        body { background: #141414; overflow: hidden; }

    </style>

</head>

<body>

    <canvas id="c"></canvas>

    <script>

        window.onload = function (argument) {

            var lyric = "i couldn't take it couldn't stand another minute couldn't bear another day without you in it all of the joy that I had known for my life was stripped away from me the minute that you died to have you in my life was all i ever wanted but now without you I'm a soul forever haunted can't help but feel that i had taken you for granted no way in hell that i can ever comprehend this i wasn't dreaming when they told me you were gone i was wide awake and feeling that they had to be wrong how could you leave me when you swore that you would stay now i'm trapped inside a nightmare every single fucking day it's like a movie but there's not a happy ending every scene fades black and there's no pretending this little fairy tale doesn't seem to end well theres no knight in shining armor who will wake me from the spell i know you didn't plan this you tried to do what's right but in the middle of this madness i'm the one you left to win this fight red like roses fills my head with dreams and finds me always closer to the emptiness and sadness that has come to take the place of you i know you're broken down by anger and by sadness you feel I left you in a world that's full of madness wish i could talk to you if only for a minute make you understand the reasons why i did it i wanna tell you that you're all that ever mattered want you to know that for eternity i'm shattered i tried so hard just to protect you but i failed to and in a prison of abandonment i've jailed you i never planned that i would leave you there alone i was sure that i would see you when i made it back home and all the times I swore that it would be okay now i'm nothing but a liar and you're thrown into the fray this bedtime story ends with misery ever after the pages are torn and there's no final chapter i didn't have a choice I did what I had to do i made a sacrifice but forced a bigger sacrifice on you i know you've lived a nightmare i caused you so much pain but baby please don't do what i did i don't want you to waste your life in vain red like roses fills my head with dreams and finds me always closer to the emptiness and sadness that has come to take the place of you you're not the only one who needed me i thought you understood you were the one i needed and you left me as I always feared you would would I change it if i could? it doesn't matter how the petals scatter now every nightmare just discloses it's your blood that's red like roses and no matter what I do nothing ever takes the place of you red like roses fills my head with dreams and finds me always closer to the emptiness and sadness that has come to take the place of you";

            var words = {};

            var words_attr = [];

            string_handle(lyric);

            var canvas = document.getElementById('c');

            canvas.width = window.innerWidth;

            canvas.height = window.innerHeight;

            if (canvas.getContext) {

                var c = canvas.getContext('2d'),

                    w = canvas.width,

                    h = canvas.height;

                c.strokeStyle = 'red';

                c.fillStyle = 'white';

                c.lineWidth = 5;

                // constructor

                Word = function (key) {

                    this.text = key;

                    this.x = Math.random() * w;

                    this.y = Math.random() * h;

                    this.font = words[key] * 10 + 'px arial'

                    this.speed = (words[key]);

                }

                for (key in words) {

                    words_attr.push(new Word(key));

                }

                console.log(words_attr.length);

                function animation() {

                    for (var i = 0; i < words_attr.length; i++) {

                        c.font = words_attr[i].font;

                        c.fillText(words_attr[i].text, words_attr[i].x, words_attr[i].y);

                        words_attr[i].width = c.measureText(words_attr[i].text).width;

                        c.stroke();

                    }

                    move();

                }

                function move() {

                    for (var i = 0; i < words_attr.length; i++) {

                        if (words_attr[i].x > w) {

                            words_attr[i].x = -words_attr[i].width;

                            words_attr[i].y = Math.random() * h;

                        } else {

                            words_attr[i].x += words_attr[i].speed;

                        }

                    }

                }

                setInterval(function () {

                    c.clearRect(0, 0, w, h);

                    animation();

                }, 24);

            }

            function string_handle(str) {

                var split_str = str.split(" ");

                var word_array = [];

                var word_count = [];

                for (var i = 0; i < split_str.length; i++) {

                    check = true;

                    for (var j = 0; j <= word_array.length; j++) {

                        if (split_str[i] == word_array[j]) {

                            word_count[j]++;

                            check = false;

                            break;

                        }

                    }

                    if (check) {

                        word_array.push(split_str[i]);

                        word_count.push(1);

                    }

                }

                for (var i = 0; i < word_array.length; i++) {

                    words[word_array[i]] = word_count[i];

                }

                return words;

            }

        }

    </script>

</body>

</html>

来源：http://codepen.io/FlyC/pen/yaNVEQ

Canvas实例的更多相关文章

  1. 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

    超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...

  2. canvas实例 ---- 制作简易迷宫（一）

    这个系列分为两部分,第一部分为迷宫的生成及操作,第二部分为自动寻路算法. 我们先看效果: See the Pen QGKBjm by fanyipin (@fanyipin) on CodePen. ...

  3. canvas实例：旋转缩放的方块

    首先在页面中创建一个canvas标签: <body> <canvas id="c1" width="500" height="500 ...

  4. canvas实例_时钟

    效果图:是一个会动的时钟 一.时钟的组成 1.表盘(蓝色)  2.刻度(黑色)  3.时针(黑色)  4.分针(黑色)  5.秒针(红色)需美化     二.主要应用的技术 Canvas画线 Canv ...

  5. canvas实例（基础）

    JS实现五子棋大战:GitHub源码 知识点总结: 第一步.基础: //获取canvas var chess = document.getElementById('chess'); //获取上下文,创 ...

  6. canvas实例_在线画图工具

    fadsfklasdjfklasjdklfjasdlk;fjasd;lfjaskl;dfjal

  7. Canvas 最佳实践（性能篇）

    Canvas 想必前端同学们都不陌生,它是 HTML5 新增的「画布」元素,允许我们使用 JavaScript 来绘制图形.目前,所有的主流浏览器都支持 Canvas. Canvas 最常见的用途是渲 ...

  8. canvas API ，通俗的canvas基础知识（六）

    这篇是canvas API系列的首尾之作,这篇以后,所有的canvas的属性和方法就将完了,哦,不对,应该是大部分常用的,还有部分不常用的属性和方法,因为种种原因,就不介绍了,后期的重点就是多写一点c ...

  9. Android核心分析之二十八Android GDI之Surface&Canvas

    Surface&Canvas Canvas为在画布的意思.Android上层的作图几乎都通过Canvas实例来完成,其实Canvas更多是一种接口的包装.drawPaints ,drawPoi ...

随机推荐

  1. jni调试3（线程调试env变量问题）

    jni层调试线程死机原因 一,导致死机原因:   jni层中  线程函数中  只要添加调用env 的函数 ,,就会死机     二,解决方法 第一我们应该理解: ①(独立性) JNIEnv 是一个与线 ...

  2. iftop与dstat-一次网站故障分析经历

    一次网站分析与解决的经历,最后结果虽然很简单但是过程比较曲折.记录一下: 今天访问网站首页十分缓慢,页面半天都加载不出来.于是上服务器看看情况,通过top看到load和cpu以及磁盘io都很低,只能祭 ...

  3. 报表软件FineReport如何连接SAP HANA

    1. 环境搭建 1.1 环境准备 首先确认HANA Studio的环境是否允许工程进行NewFile的操作,不行的话要考虑更新Studio的版本. HANAStudio需要依赖Java jdk1.6或 ...

  4. Neutron 理解（5）：Neutron 是如何向 Nova 虚机分配固定IP地址的 （How Neutron Allocates Fixed IPs to Nova Instance）

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  5. [tem]线段树(白书版)

    个人感觉有点坑 add用的标记永久化 set用的标记下传 #include <iostream> #include <cstdio> #include <algorith ...

  6. 操作系统Unix、Windows、Mac OS、Linux的故事

    电脑,计算机已经成为我们生活中必不可少的一部分.无论是大型的超级计算机,还是手机般小巧的终端设备,都跑着一个操作系统.正是这些操作系统,让那些硬件和芯片得意组合起来,让那些软件得以运行,让我们的世界在 ...

  7. 文件夹右键添加“DOS”命令

    导入注册表 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Folder\shell\RunCMD] @="进入命令行&quo ...

  8. thinkphp怎么实现图片验证码

    1.控制器 function verify() { ob_clean();//丢弃输出缓冲区中的内容 $config = array( 'fontSize' => 20, // 字体大小 'le ...

  9. animate支持的css属性

    支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...

  10. Java 8新特性终极指南

    目录结构 介绍 Java语言的新特性 2.1 Lambdas表达式与Functional接口 2.2 接口的默认与静态方法 2.3 方法引用 2.4 重复注解 2.5 更好的类型推测机制 2.6 扩展 ...