canvas背景

北沐xxx

已于 2024-03-17 18:01:32 修改

阅读量193

点赞数

文章标签：前端 javascript python

于 2022-11-29 19:35:43 首次发布

本文链接：https://blog.csdn.net/qq_35353972/article/details/128103872

版权

这篇博客介绍了如何使用JavaScript和HTML5 canvas创建动态的粒子背景和闪烁的星星效果。通过实例代码展示了如何初始化粒子位置、更新粒子状态、绘制粒子以及设置canvas背景图案。这些技术涉及到canvas的基本绘图操作、动画循环以及随机颜色和位置的生成，可用于创建丰富的视觉体验。

摘要由CSDN通过智能技术生成

一、普通的星星

//创建一个星星对象
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效果，如模糊、光晕等，进一步增强视觉效果。