代码+注释
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> colorcoderain </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
/* 设置页面背景为黑色 */
body {
background-color:black;
}
/* 设置canvas元素的透明度为0.8 */
#c {
opacity:.8;
}
/* 设置canvas元素的位置为绝对定位，覆盖整个页面 */
canvas {
position:absolute;
top:0; left:0;
}
</style>
</HEAD>
<BODY>
<!-- 创建两个canvas元素，一个用于绘制前景，一个用于背景 -->
<canvas id=c></canvas>
<canvas id=bg></canvas>
<script>
// 初始化变量
var w = c.width = window.innerWidth, // canvas宽度设置为窗口宽度
h = c.height = window.innerHeight, // canvas高度设置为窗口高度
ctx = c.getContext('2d'), // 获取2D绘图上下文
// 参数设置
total = w, // 点的总数等于窗口宽度
accelleration = .05, // 加速度
// 初始化后的计算
size = w/total, // 每个点的宽度
occupation = w/total, // 每个点的占用空间
repaintColor = 'rgba(0, 0, 0, .04)', // 重绘颜色，用于创建拖尾效果
colors = [], // 存储每个点的颜色
dots = [], // 存储每个点的Y坐标
dotsVel = []; // 存储每个点的速度
// 设置每个点的颜色和初始Y坐标
var portion = 360/total; // 计算每个点的色相增量
for(var i = 0; i < total; ++i){
colors[i] = portion * i; // 设置每个点的颜色
dots[i] = h; // 初始Y坐标为窗口高度
dotsVel[i] = 10; // 初始速度为10
}
// 动画函数
function anim(){
window.requestAnimationFrame(anim); // 请求下一帧动画
// 使用半透明黑色覆盖整个canvas，创建拖尾效果
ctx.fillStyle = repaintColor;
ctx.fillRect(0, 0, w, h);
// 遍历所有点，更新它们的位置并绘制
for(var i = 0; i < total; ++i){
var currentY = dots[i] - 1; // 当前Y坐标
dots[i] += dotsVel[i] += accelleration; // 更新Y坐标和速度
// 设置点的颜色并绘制
ctx.fillStyle = 'hsl('+ colors[i] + ', 80%, 50%)';
ctx.fillRect(occupation * i, currentY, size, dotsVel[i] + 1);
// 如果点超出窗口底部，并且随机数小于0.01，重置点的位置和速度
if(dots[i] > h && Math.random() < .01){
dots[i] = dotsVel[i] = 0;
}
}
}
// 启动动画
anim();
</script>
</BODY>
</HTML>
<SCRIPT Language=VBScript><!--
//--></SCRIPT>讲解
代码功能概述：
HTML部分：创建了一个基本的HTML页面，包含两个<canvas>元素，一个用于绘制前景，一个用于背景
CSS部分：设置了页面的背景颜色和<canvas>元素的样式。JavaScript部分：实现了动画效果，模拟了彩色雨滴下落的效果。每个点的颜色、位置和速度都被动态更新，并在每一帧中重新绘制
关键点：
- window.requestAnimationFrame(anim)：用于实现动画循环，确保动画流畅运行
- ctx.fillStyle 和 ctx.fillRect：用于设置颜色和绘制矩形，模拟雨滴的效果
- hsl()：用于生成颜色，通过改变色相（hue）来创建彩虹效果
- 拖尾效果：通过使用半透明的黑色矩形覆盖整个canvas，创建了雨滴下落时的拖尾效果
发表回复