Canvas 文本的毛刺 | 毛边特效

可以用来生成卡通文本

canvas，glitch，文本特效

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvas2 = document.createElement('canvas');
var ctx2 = canvas2.getContext('2d');
var random = new Random(Random.engines.mt19937().autoSeed());

var frames = 1;
var tick = 0;

canvas.width = 350;
canvas.height = 350;
canvas2.height = 350;

ctx2.font = '80pt Calibri';
ctx2.textAlign = 'center';

canvas2.width = canvas.width = ctx2.measureText(canvas.innerHTML).width;

ctx2.font = '80pt Calibri';
ctx2.textAlign = 'center';

for (var i = 0; i < 40; i++) {
    ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
    ctx2.fillStyle = 'hsl(' + i * (360 / 40) + ', 50%, 50%)';
    ctx2.fillText(canvas.innerHTML, canvas.width / 2, canvas.height / 2);
    ctx.drawImage(canvas2, i * (canvas2.width / 40), random.integer(-5, 5), canvas2.width / 40, canvas2.height, i * (canvas2.width / 40), 0, canvas2.width / 40, canvas2.height);
};

//let angle = 0;

function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < 40; i++) {
        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);

ctx2.fillStyle = 'hsl(' + -i * (360 / 40) + ', 80%, 20%)';
        ctx2.fillText(canvas.innerHTML, canvas.width / 2 + random.integer(-2, 2), canvas.height / 2 + random.integer(-2, 2));

ctx2.fillStyle = 'hsl(' + i * (360 / 40) + ', 50%, 50%)';
        ctx2.fillText(canvas.innerHTML, canvas.width / 2, canvas.height / 2);

//let y = Math.sin(i * (40 / (Math.PI / 4))) * 5;

//ctx.drawImage(canvas2, (i * (canvas2.width / 40)), y, canvas2.width / 40, canvas2.height, i * (canvas2.width / 40), 0, canvas2.width / 40,  canvas2.height);
        ctx.drawImage(canvas2, i * (canvas2.width / 40) + random.integer(-2, 2), random.integer(-5, 5), canvas2.width / 40, canvas2.height, i * (canvas2.width / 40), 0, canvas2.width / 40, canvas2.height);

//angle+= 0.01;
    };
}

function update() {

// if(tick % frames == 0){
    draw();

//frames = random.integer(6, 24);
    //}

//requestAnimationFrame(update);

//tick++;
}

requestAnimationFrame(update);

document.addEventListener('click', update);

编译

CSS

HTML

可以用来生成卡通文本

canvas，glitch，文本特效

编辑器支持Emmet

快捷键

可以用来生成卡通文本

canvas，glitch，文本特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：