html5canvas效果跳一跳小游戏,HTML5 Canvas在水面波浪中起伏跳跃的文本动画效果

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

const canvas = document.querySelector("canvas");

const context = canvas.getContext("2d");

const text = "Hello World";

const multiplier = 1000;

const amplitude = 30;

function frame(t) {

const colors = [

"#f77194",

"#ebf771",

"#90f771",

"#71f7eb",

"#7187f7",

"#f7187f",

"#e071f7"

];

const m = 0.005;

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

context.save();

context.translate(canvas.width >> 1, canvas.height >> 1);

context.font = "72px monospace";

context.textAlign = "center";

context.textBaseline = "middle";

const { width } = context.measureText(text);

for (let i = 0; i < text.length; i++) {

const character = text.charAt(i);

const { width: x } = context.measureText(text.substr(0,i));

const { width: cw } = context.measureText(character);

const p = t + (i * multiplier);

const y = Math.sin(p * m) * amplitude;

context.save();

context.translate(x - (width >> 1) + (cw >> 1),y);

context.rotate(Math.cos(p * m) * 0.5);

//context.fillText(character, -x, 0); // I LOVE THIS

context.fillStyle = colors[i % colors.length];

context.fillText(character, 0, 0); // I LOVE THIS

context.restore();

}

context.beginPath();

for (let i = 0; i < text.length; i++) {

const p = t + (i * multiplier);

const pn = t + ((i + 1) * multiplier);

const y = Math.sin(p * m) * amplitude;

const yn = Math.sin(pn * m) * amplitude;

const character = text.charAt(i);

const { width: x } = context.measureText(text.substr(0,i));

const { width: cw } = context.measureText(character);

if (i === 0) {

context.moveTo(

x - (width >> 1) + (cw >> 1),

y + 64

);

} else {

context.quadraticCurveTo(

x - (width >> 1) + (cw >> 1),

y + 64,

x - (width >> 1) + cw,

y + ((yn - y) * 0.5) + 64

);

}

}

context.lineWidth = 5;

context.strokeStyle = "#71f7eb";

context.stroke();

context.beginPath();

for (let i = 0; i < text.length; i++) {

const p = t + (i * multiplier);

const pn = t + ((i + 1) * multiplier);

const y = Math.sin(p * m) * amplitude;

const yn = Math.sin(pn * m) * amplitude;

const character = text.charAt(i);

const { width: x } = context.measureText(text.substr(0,i));

const { width: cw } = context.measureText(character);

if (i === 0) {

context.moveTo(

x - (width >> 1) + (cw >> 1),

y + 80

);

} else {

context.quadraticCurveTo(

x - (width >> 1) + (cw >> 1),

y + 80,

x - (width >> 1) + cw,

y + ((yn - y) * 0.5) + 80

);

}

}

context.lineWidth = 5;

context.strokeStyle = "#71f7eb";

context.stroke();

context.beginPath();

for (let i = 0; i < text.length; i++) {

const p = t + (i * multiplier);

const pn = t + ((i + 1) * multiplier);

const y = Math.sin(p * m) * amplitude;

const yn = Math.sin(pn * m) * amplitude;

const character = text.charAt(i);

const { width: x } = context.measureText(text.substr(0,i));

const { width: cw } = context.measureText(character);

if (i === 0) {

context.moveTo(

x - (width >> 1) + (cw >> 1),

y + 96

);

} else {

context.quadraticCurveTo(

x - (width >> 1) + (cw >> 1),

y + 96,

x - (width >> 1) + cw,

y + ((yn - y) * 0.5) + 96

);

}

}

context.lineWidth = 5;

context.strokeStyle = "#71f7eb";

context.stroke();

context.restore();

requestAnimationFrame(frame);

}

function resize() {

canvas.width = canvas.offsetWidth;

canvas.height = canvas.offsetHeight;

}

function start() {

addEventListener("resize", resize);

dispatchEvent(new Event("resize"));

requestAnimationFrame(frame);

}

start();