html信号动画,HTML5 Canvas火箭着陆和雷达信号动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

let canvas = document.querySelector('canvas');

let ctx = canvas.getContext('2d');

canvas.width = document.body.clientWidth;

canvas.height = 150;

let centerX = canvas.width / 2;

let centerY = canvas.height / 2;

let lineY = 0;

let lines = [];

for (let i = 0; i < 3; i++) {

lines.push({

y: i * canvas.height / 3

});

}

function update(dt) {

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

lines[i].y += 1.2;

if (lines[i].y >= canvas.height) {

lines[i].y = 0;

}

}

}

function draw(dt) {

requestAnimationFrame(draw);

update(dt);

ctx.fillStyle = "#24241f";

ctx.strokeStyle = "#dd5277";

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

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

ctx.shadowColor = '#dd5277';

ctx.shadowOffsetX = 0;

ctx.shadowOffsetY = 0;

ctx.shadowBlur = 20;

for (let i = lines.length - 1; i >= 0; i--) {

ctx.beginPath();

ctx.moveTo(0, lines[i].y);

ctx.lineWidth = 0.2 + (lines[i].y * (1.5 - 0.2) / canvas.height)

ctx.lineTo(canvas.width, lines[i].y);

ctx.stroke();

}

ctx.lineWidth = 3.0;

// middle line

ctx.beginPath();

ctx.moveTo(centerX, 0);

ctx.lineTo(centerX, canvas.height);

ctx.stroke();

let spacing = 80;

let verticalLines = Math.round(canvas.width / spacing / 2);

for (let i = 1; i <= verticalLines; i++) {

ctx.beginPath();

ctx.moveTo(centerX - (i * spacing), -1);

ctx.bezierCurveTo(

centerX - (i * spacing) * 1.5, 10,

centerX - (i * spacing) * 2.5, canvas.height,

centerX - (i * spacing) * 2.5, canvas.height,

);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(centerX + (i * spacing), -1);

ctx.bezierCurveTo(

centerX + (i * spacing) * 1.5, 10,

centerX + (i * spacing) * 2.5, canvas.height,

centerX + (i * spacing) * 2.5, canvas.height,

);

ctx.stroke();

}

}

draw();