In HTML5, not only can graphics and animations be drawn on Canvas, but also various cool text animation effects can be realized. This time we are sharing a text animation based on HTML5 Canvas. This text animation is to hang the text on a thin flexible line. Drag the text with the mouse to make it bounce in all directions.
Advertisement
const txt = 'EXPANDED';
const viscosity = 0.005;
const stiffness = 0.99;
class Point {
constructor (i, x, y) {
this.c = null;
this.x0 = x;
this.y0 = y;
this.x = x + Math.sin(i) * 100;
this.y = y + Math.cos(i) * 100;
this.vx = 0.0;
this.vy = 0.0;
this.a = 0.0;
this.s = 0.0;
this.p0 = this;
this.p1 = this;
this.t = 0;
}
texture (c, color) {
this.c = document.createElement("canvas");
const ctx = this.c.getContext("2d");
this.c.width = this.c.height = 400;
ctx.font = "500px Arial Black, Arial";
ctx.fillStyle = color;
ctx.textAlign = "center";
ctx.fillText(c, 200, 385);
}
drawSegment() {
ctx.beginPath();
ctx.strokeStyle = "#666";
ctx.moveTo(this.p0.x, this.p0.y);
ctx.lineTo(this.x, this.y);
ctx.lineTo(this.p1.x, this.p1.y);
ctx.stroke();
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, 2 * Math.PI);
ctx.stroke();
}
draw () {
const fx = (this.x0 - this.x) * viscosity;
const fy = (this.y0 - this.y) * viscosity;
this.vx *= stiffness;
this.vy *= stiffness;
this.vx += fx;
this.vy += fy;
this.x += this.vx;
this.y += this.vy;
if (this.c !== null) {
ctx.beginPath();
ctx.save();
ctx.translate(this.x, this.y);
const dy = this.p1.x - this.p0.x;
const dx = this.p1.y - this.p0.y;
this.a = Math.atan2(dx, dy);
this.s = Math.sqrt(dy * dy + dx * dx) / 2;
ctx.rotate(this.a);
ctx.drawImage(this.c, -this.s * 0.5, -this.s * 0.5, this.s, this.s);
ctx.restore();
}
}
}
body, html {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
touch-action: none;
content-zooming: none;
background: #000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
user-select: none;
background: #000;
}
Advertisement
