使用Canvas绘制Hello World逐个字母渐入动画

学习如何使用Canvas来输出一个特别的hello world字符串。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1996
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function(win, doc) {

"use strict";

var img = new Image(),
        main = doc.getElementById("main"),
        mainCtx = main.getContext("2d"),
        sub = doc.createElement("canvas"),
        subCtx = sub.getContext("2d"),
        i = 0,
        WIDTH = 250,
        HEIGHT = 50,
        SIZE = 5,
        INTERVAL = 5;

main.width = sub.width = WIDTH;
    main.height = sub.height = HEIGHT;

build(0);

setInterval(function() {
        main.width = WIDTH;
        mainCtx.font = "30px AvenirNext-Heavy";
        mainCtx.fillText("HELLO WORLD.", 0, 30);
        mainCtx.globalCompositeOperation = "destination-in";
        mainCtx.drawImage(sub, 0, 0);
    }, 1000 / 24);

function build(i) {
        var height = HEIGHT / SIZE,
            max = (i + 1 < height) ? (i + 1) : height;

(function setRect(j) {
            if (j < max) {
                subCtx.rect((i - j) * SIZE, j * SIZE, SIZE, SIZE);
                subCtx.fill();
                setTimeout(function() {
                    setRect(++j);
                }, INTERVAL);
            } else {
                if ((i - HEIGHT / SIZE) * SIZE < win.innerWidth) {
                    build(++i);
                }
            }
        })(0);
    }

})(this, document);

编译

CSS

HTML

学习如何使用Canvas来输出一个特别的hello world字符串。

编辑器支持Emmet

快捷键

学习如何使用Canvas来输出一个特别的hello world字符串。

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

HTML5 Canvas使用分形算法实现交互式花形图案自动绘制

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：