一、普通的星星
//创建一个星星对象
class Star {
constructor() {
this.x = windowWidth * Math.random(); //横坐标
this.y = 5000 * Math.random(); //纵坐标
this.text = "."; //文本
this.color = "white"; //颜色
}
//初始化
init() {
this.getColor();
}
//绘制
draw() {
context.fillStyle = this.color;
context.fillText(this.text, this.x, this.y);
}
}
//画星星
for (let i = 0; i < starCount; i++) {
let star = new Star();
star.init();
star.draw();
arr.push(star);
}
二、闪动的星星
//创建一个星星对象
class Star {
constructor() {
this.x = windowWidth * Math.random(); //横坐标
this.y = 5000 * Math.random(); //纵坐标
this.text = "."; //文本
this.color = "white"; //颜色
}
// 获取随机颜色
getColor() {
let _r = Math.random();
if (_r < 0.5) {
this.color = "#333";
} else {
this.color = "white";
}
}
//初始化
init() {
this.getColor();
}
//绘制
draw() {
context.fillStyle = this.color;
context.fillText(this.text, this.x, this.y);
}
}
//画星星
for (let i = 0; i < starCount; i++) {
let star = new Star();
star.init();
star.draw();
arr.push(star);
}
//繁星闪起来
let t1
function playStars() {
for (let n = 0; n < starCount; n++) {
arr[n].getColor();
arr[n].draw();
}
t1 = requestAnimationFrame(playStars);
}
在canvas中设置背景,可以使用ctx.createPattern()
方法。这个方法可以创建一个图案,并将其应用于背景。具体使用方法如下:
首先,你需要获取你想要作为背景的图片的路径。然后,使用createPattern()
方法创建一个图案,并指定图片的平铺方式。平铺方式可以是repeat
(平铺)、repeat-x
(沿x轴平铺)、repeat-y
(沿y轴平铺)或no-repeat
(不平铺)。
例如:
javascript复制代码
var img = new Image();
img.src = '你的图片路径';
img.onload = function() {
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
这段代码首先创建了一个新的Image对象,并设置了其源路径。然后,在图片加载完成后,使用createPattern()
方法创建了一个图案,并将其设置为填充样式。最后,使用fillRect()
方法将整个canvas填充为这个图案,从而实现了设置背景的效果。
此外,你还可以通过其他方式来实现canvas背景的设置,例如直接在canvas上绘制图片作为背景,或者使用渐变效果作为背景等。具体选择哪种方式取决于你的具体需求和设计。
最后,请注意,上述代码中的ctx
是canvas的2D渲染上下文,你可以通过canvas.getContext('2d')
来获取。同时,确保你的图片路径是正确的,否则图片可能无法加载,导致背景设置失败。
生成粒子背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粒子背景示例</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="particleCanvas"></canvas>
<script>
const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');
const particles = [];
const particleCount = 200;
// 初始化粒子
function initParticles() {
for (let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 2 + 1,
speedX: (Math.random() - 0.5) * 4,
speedY: (Math.random() - 0.5) * 4,
opacity: Math.random()
});
}
}
// 更新粒子
function updateParticles() {
for (let i = 0; i < particles.length; i++) {
const particle = particles[i];
particle.x += particle.speedX;
particle.y += particle.speedY;
// 如果粒子飞出画布,重新定位
if (particle.x < 0 || particle.x > canvas.width || particle.y < 0 || particle.y > canvas.height) {
particle.x = Math.random() * canvas.width;
particle.y = Math.random() * canvas.height;
particle.speedX = (Math.random() - 0.5) * 4;
particle.speedY = (Math.random() - 0.5) * 4;
}
}
}
// 绘制粒子
function drawParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
for (let i = 0; i < particles.length; i++) {
const particle = particles[i];
ctx.globalAlpha = particle.opacity;
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
}
// 初始化画布大小
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
initParticles();
}
// 窗口大小改变时重新调整画布大小
window.addEventListener('resize', resizeCanvas);
// 初始化
resizeCanvas();
// 动画循环
function animate() {
requestAnimationFrame(animate);
updateParticles();
drawParticles();
}
// 开始动画
animate();
</script>
</body>
</html>
在上面的代码中,我们首先创建了一个
canvas
元素,并获取了其2D渲染上下文。然后我们定义了一些变量和函数:
particles
数组用来存储粒子的属性,包括位置(x
和y
)、大小(size
)、速度(speedX
和speedY
)和透明度(opacity
)。initParticles
函数用于初始化粒子的位置和其他属性。updateParticles
函数用于更新每个粒子的位置,并在粒子飞出画布时重新定位它们。drawParticles
函数用于清除画布并绘制每个粒子。resizeCanvas
函数用于调整画布大小并重新初始化粒子。animate
函数用于创建一个动画循环,该循环在每个帧调用updateParticles
和drawParticles
函数。
Canvas背景生成粒子背景的关键技术主要涉及以下几个步骤:
- 初始化粒子:
- 创建一个粒子数组,用于存储所有粒子的属性,如位置(x, y)、速度(vx, vy)、大小、颜色、生命周期等。
- 初始化每个粒子的属性,通常使用随机数来设置初始位置和速度,以创建自然的粒子分布和动态效果。
- 粒子动画循环:
- 使用
requestAnimationFrame
或定时器来创建一个动画循环,这个循环会不断更新和重绘粒子。 - 在每一帧中,更新每个粒子的位置(通过速度和当前时间),并根据需要更新其他属性(如大小、颜色、透明度等)。
- 使用
- 绘制粒子:
- 清除canvas上的旧内容,以便绘制新的粒子位置。
- 遍历粒子数组,使用canvas的绘图API(如
fillRect
、arc
、drawImage
等)来绘制每个粒子。 - 可以根据粒子的属性调整绘制效果,如使用不同的颜色、透明度、形状等。
- 粒子生命周期管理:
- 如果需要,可以给粒子设置一个生命周期属性,当生命周期结束时,移除该粒子或重置其属性。
- 也可以根据需要添加粒子的产生和消亡逻辑,以维持粒子数量的动态平衡。
- 交互和性能优化:
- 根据需要添加鼠标或触摸交互,使粒子能够响应用户的操作。
- 优化性能,避免过多的计算和绘制操作导致浏览器卡顿或延迟。
- 可以使用离屏canvas、Web Workers等技术来提高性能。
- 视觉效果增强:
- 使用不同的粒子形状、颜色、大小、透明度等属性来创建丰富的视觉效果。
- 可以添加粒子之间的交互效果,如碰撞、吸引、排斥等。
- 结合其他canvas效果,如模糊、光晕等,进一步增强视觉效果。
这些关键技术的实现细节会因具体需求和项目规模而有所不同。在实际开发中,你可能需要根据项目的具体要求进行适当的调整和扩展。同时,也要注意保持代码的清晰和可维护性,以便在未来的开发中进行迭代和优化。