在Canvas中画按下键盘后的字母特效

字母蹦极动画

canvas，字母

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3495
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

var width = window.innerWidth;
var height = window.innerHeight;
var frameRate = 1 / 40;
var canvas = "";
var ctx = "";

var randomstartplacement = false;
var rainbowmode = true;
var letterpushed = false;
var letterlist = [];

var Cd = 0.47;
var rho = 1.22;
var A = Math.PI * 15 * 15 / 10000;
var ag = 9.81;

var setup = function setup() {
    canvas = document.getElementsByTagName("canvas")[0];
    ctx = canvas.getContext("2d");
    canvas.width = width;
    canvas.height = height;
    window.addEventListener('resize', resizeCanvas, false);
    window.addEventListener('keydown', keyUp, false);

document.getElementById('rainbow').onclick = function(e) {
        rainbowmode = e.currentTarget.checked;
    };

document.getElementById('startplacement').onclick = function(e) {
        randomstartplacement = e.currentTarget.checked;
    };

ctx.shadowBlur = 50;

initSentence("HELLO CODEPEN! TYPE SOMETHING!");
    loop();
};

var resizeCanvas = function resizeCanvas() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
    ctx.shadowBlur = 50;
};

var keyUp = function keyUp(e) {
    letterpushed = true;
    var ltr = generateLetter(String.fromCharCode(e.keyCode));
    letterlist.push(ltr);
};

var generateColor = function generateColor() {
    if (rainbowmode) {
        return "#" + Math.random().toString(16).slice(2, 8);
    }
    return "#ffffff";
};

var generateStartPlacement = function generateStartPlacement() {
    if (randomstartplacement) {
        return getRandomArbitrary(0, width);
    }
    return width / 2;
};

var loop = function loop() {
    ctx.clearRect(0, 0, width, height);
    letterlist.map(function(ltr) {
        var Fx = -0.5 * Cd * A * rho * ltr.velocity.x * ltr.velocity.x * ltr.velocity.x / Math.abs(ltr.velocity.x);
        var Fy = -0.5 * Cd * A * rho * ltr.velocity.y * ltr.velocity.y * ltr.velocity.y / Math.abs(ltr.velocity.y);

Fx = isNaN(Fx) ? 0 : Fx;
        Fy = isNaN(Fy) ? 0 : Fy;

var ax = Fx / ltr.mass;
        var ay = ag + Fy / ltr.mass;

ltr.velocity.x += ax * frameRate;
        ltr.velocity.y += ay * frameRate;

ltr.position.x += ltr.velocity.x * frameRate * 100;
        ltr.position.y += ltr.velocity.y * frameRate * 100;

if (ltr.position.y > height - ltr.radius) {
            ltr.velocity.y *= ltr.restitution;
            ltr.position.y = height - ltr.radius;
        }

if (ltr.position.x > width - ltr.radius) {
            ltr.velocity.x *= ltr.restitution;
            ltr.position.x = width - ltr.radius;
        }

if (ltr.position.x < ltr.radius) {
            ltr.velocity.x *= ltr.restitution;
            ltr.position.x = ltr.radius;
        }

ltr.draw(ctx, ltr);
        ltr.duration--;
    });

letterlist = letterlist.filter(function(ltr) {
        return ltr.duration > 0;
    });

window.requestAnimationFrame(function() {
        loop();
    });
};

var getRandomArbitrary = function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
};

setup();

编译

CSS

HTML

字母蹦极动画

canvas，字母

编辑器支持Emmet

快捷键

字母蹦极动画

canvas，字母

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：