动画代码 (cmd有趣的代码动画代码)

文章编号：1626 / 更新时间：2024-12-30 19:57:32 / 浏览：次
cmd有趣的

以下是一些有趣的代码动画，你可以用来展示你的创意和编程技能。

下雨图

这个动画模拟了雨滴落下的场景。

    var canvas = document.getElementById("rain-canvas");var ctx =canvas.getContext("2d");// 定义雨滴属性var rainDrops = [];var numRainDrops = 100;var dropSpeed = 5;// 创建雨滴for (var i = 0; i < numRainDrops; i++) {rainDrops.push({x: Math.random()  canvas.width,y: Math.random()  canvas.height,speed: Math.random()  dropSpeed + 1});}// 绘制雨滴
var ctx = canvas.getContext("2d");// 定义烟花属性var fireworks = [];var numFireworks = 10;var fireworkSpeed = 5;var explosionRadius = 50;// 创建烟花for (var i = 0; i < numFireworks; i++) {fireworks.push({x: Math.random()  canvas.width,y: canvas.height,speed: Math.random()  fireworkSpeed + 1});}// 绘制烟花function drawFireworks() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (var i = 0; i < numFireworks; i++) {// 绘制烟花ctx.beginPath();ctx.arc(fireworks[i].x, fireworks[i].y, 5, 0, 2  Math.PI);ctx.fillStyle = "red";ctx.fill();// 更新烟花位置fireworks[i].y -= fireworks[i].speed;if (fireworks[i].y < 0) {fireworks[i].y = canvas.height;}// 烟花爆炸if (fireworks[i].y < canvas.height / 2) {explodeFirework(fireworks[i]);}}requestAnimationFrame(drawFireworks);}// 烟花爆炸function explodeFirework(firework) {for (var i = 0; i < explos模拟了海洋波浪的涌动。
    var canvas = document.getElementById("wave-canvas");var ctx = canvas.getContext("2d");// 定义波浪属性var waves = [];var numWaves = 10;var waveSpeed = 5;var waveAmplitude = 50;// 创建波浪for (var i = 0; i < numWaves; i++) {waves.push({x: i  waveSpeed,y: canvas.height / 2,speed: waveSpeed,amplitude: waveAmplitude});}// 绘制波浪function drawWaves() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (var i = 0; i < numWaves; i++) {// 绘制波浪ctx.beginPath();ctx.moveTo(waves[i].x, waves[i].y + waves[i].amplitude  Math.sin(waves[i].x / 100));for (var j = 1; j < canvas.width; j++) {ctx.lineTo(j, waves[i].y + waves[i].amplitude  Math.sin(j / 100));}ctx.strokeStyle = "blue";ctx.stroke();// 更新波浪位置waves[i].x += waves[i].speed;if (waves[i].x > canvas.width) {waves[i].x = 0;}}requestAnimationFrame(drawWaves);}// 启动动画drawWaves();
更多资源
以下是一些可以找到更多有趣代码动画的资源：
CodePen
D3.js
p5.js