满天星之canvas实现【canvas】

最新推荐文章于 2025-06-17 14:52:18 发布

蓝莓味的口香糖

最新推荐文章于 2025-06-17 14:52:18 发布

阅读量977

点赞数 36

CC 4.0 BY-SA版权

分类专栏： Canvas JavaScript 文章标签：前端 javascript 动画

本文链接：https://blog.youkuaiyun.com/itzhholi/article/details/148311438

JavaScript 同时被 2 个专栏收录

5 篇文章

订阅专栏

Canvas

2 篇文章

订阅专栏

展示

在这里插入图片描述

文章目录

Canvas 介绍【基础】

简介

Canvas是一个基于HTML5的绘图技术，允许开发者通过JavaScript动态渲染图形、动画和交互式内容。它广泛用于游戏开发、数据可视化、图像处理和网页特效设计，提供像素级控制能力。
Canvas的API支持绘制路径、形状、文本和图像，并结合渐变、阴影等效果。作为无状态绘图表面，性能高效，适合复杂视觉呈现。与SVG不同，Canvas直接操作像素，
适合动态场景和实时渲染。现代浏览器均原生支持，是Web前端开发的核心工具之一。

兼容性

在这里插入图片描述

关键特性

即时绘制，无需DOM操作
响应式设计适配不同屏幕尺寸
可与WebGL结合实现3D图形canvas

注意事项

请确保在DOM加载完成后执行这段代码
如果需要清除画布，可以使用ctx.clearRect(0, 0, canvas.width, canvas.height)
坐标系统原点(0,0)位于画布左上角

应用场景：

创建简单的图形元素
作为游戏中的基本图形对象
构建数据可视化图表的基本单元

基本示例

HTML

<canvas id="canvas" width="300" height="300">
  抱歉，你的浏览器不支持 canvas 元素
  （这些内容将会在不支持&lt;canvas%gt;元素的浏览器或是禁用了 JavaScript
  的浏览器内渲染并展现）
</canvas>

JavaScript

// 示例：绘制一个红色矩形
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

实现效果

满天星代码实现【重点】

代码解释

获取画布dom以及画布宽高

	let canDom = document.getElementById('myCanvas')
  	let canW = canDom.width;
  	let canH = canDom.height;

初始化生成星星的坐标点信息
- 随机生成星星的坐标点，半径，填充色等信息
- 将之保存在一个数组中

 	let arr = [];
 		// 随机生成坐标信息
	  function randomP(w, y, count) {
	    let arr = [];
	    for (let i = 0; i < count; i++) {
	      let obj = {
	        x: Math.random() * w,
	        y: Math.random() * y,
	        r: Math.random() * 2.5,
	        a: false,
	        c: `rgba(${Math.random() *255},${Math.random() *255},${Math.random() *255}, ${Math.random() *1})`
	      }
	      arr.push(obj);
	    }
	    return arr
	  }

在画布上，根据生成的星星坐标等基础信息，在画布上绘制出静态的点

 function drawP(arr) {
     let canDom = document.getElementById('myCanvas')
    let ctx = canDom.getContext('2d')
    //清空画布
    ctx.clearRect(0, 0, canW, canH);
    //画星星
    for (let i = 0; i < arr.length; i++){
      let p = arr[i];
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fillStyle = p.c;
      ctx.fill();
    }
   
  }

此时，生成的点是静态的。

在这里插入图片描述

确定变化以及最大值，计算下一次星星展示大小。

// 计算半径，替换坐标
  function computedR(arr) {
    let jb = .5 * Math.random(); //随机变化大小
    let ac = 3; //最大值
    for (let i = 0; i < arr.length; i++) {
      let item = arr[i];
      //临界值判断
      if ((item.r - jb > 0 || item.r + jb > ac) && !item.a) {
       item.r = item.r - jb
      } else {
        item.r = item.r + jb
        item.a = true
        if (item.r + jb > ac) {
          item.a = false
        }
      }
    }
    return arr;
  }

最后，通过定时器，在一个合适的调用频率下，反复执行清除–画–清除–…的操作。让星星动起来。

function init() {
    arr = randomP(canW, canH, 100)
    drawP(arr);
    let timer = setInterval(function () {
       arr = computedR(arr);
      drawP(arr);
    },60)
 }
init()

全量代码【来吧，尽情复制吧少年】

html引入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./reset.css">
  <link rel="stylesheet" href="./index.css">
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #myCanvas{
      background-color: black;
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>
<body>
 <canvas id="myCanvas" class="my-canvas">您的浏览器不支持html5标签，请您换更高版本的浏览器</canvas> 
</body>
<script src="./index.js"></script>
</html>

JS代码

((window) => {

  /** @type {HTMLCanvasElement} */
  let canDom = document.getElementById('myCanvas')
  let canW = canDom.width;
  let canH = canDom.height;
  let arr = [];
  init();
  function init() {
    arr = randomP(canW, canH, 100)
    drawP(arr);
    let timer = setInterval(function () {
       arr = computedR(arr);
      drawP(arr);
    },60)
  }
 

// 计算半径，替换坐标
  function computedR(arr) {
    let jb = .5 * Math.random();
    let ac = 3;
    for (let i = 0; i < arr.length; i++) {
      let item = arr[i];
      if ((item.r - jb > 0 || item.r + jb > ac) && !item.a) {
       item.r = item.r - jb
      } else {
        item.r = item.r + jb
        item.a = true
        if (item.r + jb > ac) {
          item.a = false
        }
      }
    }
    return arr;
  }
  // 画点
  function drawP(arr) {
     let canDom = document.getElementById('myCanvas')
    let ctx = canDom.getContext('2d')
    ctx.clearRect(0, 0, canW, canH);
    for (let i = 0; i < arr.length; i++){
      let p = arr[i];
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fillStyle = p.c;
      ctx.fill();
    }
   
  }

  // 随机生成坐标信息
  function randomP(w, y, count) {
    let arr = [];
    for (let i = 0; i < count; i++) {
      let obj = {
        x: Math.random() * w,
        y: Math.random() * y,
        r: Math.random() * 2.5,
        a: false,
        c: `rgba(${Math.random() *255},${Math.random() *255},${Math.random() *255}, ${Math.random() *1})`
      }
      arr.push(obj);
    }
    return arr
  }

})(window)