当前位置：首页 > article >正文

满天星之canvas实现【canvas】

article 2025/6/1 4:59:58

展示

在这里插入图片描述

文章目录

- 展示
- Canvas 介绍【基础】
- - 简介
  - 兼容性
  - 关键特性
  - 注意事项
  - 应用场景：
  - 基本示例
- 满天星代码实现【重点】
- - 代码解释
- 全量代码【来吧，尽情复制吧少年】
- - html引入
  - JS代码
- 参考资源

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 + jbitem.a = trueif (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 + jbitem.a = trueif (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)

参考资源

AI助手【DeekSeek-R1（满血版）】
MDN-canvas：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/canvas
Can i use :https://caniuse.com/?search=canvas

满天星之canvas实现【canvas】

展示文章目录展示Canvas 介绍【基础】简介兼容性关键特性注意事项应用场景：基本示例满天星代码实现【重点】代码解释全量代码【来吧，尽情复制吧少年】html引入JS代码参考资源 Canvas 介绍【基础】简介 Canvas是一个基于HTML5的绘图技术&#xff0…...

编程日记 2025/6/1 4:59:58

我在架构师面前谈 Spring Inner Beans，他直接点头说：这人有料！

“你听说了吗？阿里、字节最近的Java面试题又加难了！” “嗯？咋了？” “Spring又被拿出来问了，这次居然问到了Inner Beans！” “这不是冷门题吗？” “是啊，我一开始还真没答上来……” 是的！今天要跟大家唠嗑的，就是这个在面试中悄悄冒头，但平时开发中却经常被我们忽…...

编程日记 2025/5/31 18:17:19

Java无序数组 vs 有序数组：性能对比与选型指南

在Java中选择使用无序数组还是有序数组，需根据具体的应用需求和操作特性进行权衡。以下是从不同维度分析的详细对比及建议： 一、核心操作的性能对比操作无序数组有序数组插入/追加O(1)（直接尾部插入）O(n)（需移动元素…...

编程日记 2025/5/31 18:32:23

【Linux 基础知识系列】第二篇-Linux 发行版概述

一、什么是 Linux 发行版？ Linux 发行版是指将 Linux 内核和应用程序、工具、库等有机组合在一起，形成一个完整的操作系统。由于 Linux 的开源特性，任何人都可以在 Linux 内核的基础上进行修改和定制，因此产生了许多不同的发行版…...

编程日记 2025/5/31 17:19:22

【开源解析】基于PyQt5+Folium的谷歌地图应用开发：从入门到实战

🌐【开源解析】基于PyQt5Folium的谷歌地图应用开发：从入门到实战 🌈 个人主页：创客白泽 - CSDN博客 🔥 系列专栏：🐍《Python开源项目实战》 💡 热爱不止于代码，热情源自每…...

编程日记 2025/5/31 18:41:56

在 Ubuntu 22.04 LTS 上离线安装 Docker

在 Ubuntu 22.04 LTS 上离线安装 Docker 一、准备工作 1.1 获取目标系统信息在目标 Ubuntu 22.04 LTS 系统上，先执行以下命令确认架构信息： uname -m lsb_release -a一般返回如下信息： 1.2 需要一台可联网的机器准备一台可以连接互联网…...

编程日记 2025/5/31 15:35:06

一、安装langchain 安装依赖 python -m venv env.\env\Scripts\activatepip3 install langchainpip3 install langchain-corepip3 install langchain-openaipip3 install langchain-communitypip3 install dashscopepip3 install langchain_postgrespip3 install "psyc…...

编程日记 2025/5/31 14:36:16

Qt 中的 d-pointer 与 p-pointer小结

Qt 中的 d-pointer 与 p-pointer： PIMPL 惯用法解析在 Qt 库中，尤其是在其核心类和模块中，广泛使用了 PIMPL (Pointer to IMPLementation，指向实现的指针) 的编程惯用法。这种模式通过一对指针来实现：d-pointer (d_p…...

编程日记 2025/6/1 3:18:32

冷库耗电高的一种重要原因分析，以及一种降低冷库电费≥20%的方法

1.冷库耗电高的原因分析 1.1化霜不及时固定周期化霜：传统定时化霜模式（如每日2次）未考虑实际结霜量，导致无效化霜（霜层薄时仍启动化霜），浪费大量电能。化霜时间过长：化霜加热器…...

编程日记 2025/5/31 19:29:44

理解 Redis 事务-21（使用事务实现原子操）

使用事务实现原子操作 Redis 事务是一种在单个步骤中执行一组命令的机制。"要么全部，要么全部不"的方法确保了数据的一致性和完整性，尤其是在需要对相关数据进行多个操作时。没有事务，并发操作可能会导致竞争条件和不一致的数据状…...

编程日记 2025/5/31 14:35:46

神经网络加上注意力机制，精度反而下降，为什么会这样呢？注意力机制的本质是什么？如何正确使用注意力机制？注意力机制 | 深度学习

在深度学习的发展中，注意力机制的引入曾被誉为一次划时代的技术飞跃。无论是在自然语言处理领域产生Transformer架构，还是在图像识别、语音识别和推荐系统等多个方向取得显著成效，注意力机制的价值似乎毋庸置疑。然而，在一些实际应用场景中，研究人员和工程师却发现：在传统…...

编程日记 2025/5/31 15:20:51

触控精灵 ADB运行模式填写电脑端IP教程

•ADB模式，如果你手机已经root则可以直接运行，无需安装电脑端。 •ADB模式，如果你手机没有root，那你可以windows电脑下载【极限投屏】软件，然后你的手机和电脑的网络要同一个wifi，然后把你电脑的ip地址填写…...

编程日记 2025/5/31 19:29:43

uniapp｜实现多端图片上传、拍照上传自定义插入水印内容及拖拽自定义水印位置,实现水印相机、图片下载保存等功能

本文以基础视角，详细讲解如何在uni-app中实现图片上传→水印动态编辑→图片下载的全流程功能。目录引言应用场景分析（社交媒体、内容保护、企业素材管理等）uniapp跨平台开发优势核心功能实现图片上传模块多来源支持：相册选择（`uni.chooseImage`）与拍照（`sourceType:…...

编程日记 2025/5/31 19:15:26

linux有效裁剪视频的方式(基于ffmpeg，不改变分辨率，帧率，视频质量，不需要三方软件)

就是在Linux上使用OBS Studio录制一个讲座或者其他视频，可能总有些时候会多录制一段时间，但是如果使用剪映或者PR这样的工具在导出的时候总需要烦恼导出的格式和参数，比如剪映就不支持mkv格式的导出，导出成mp4格式的视频就会变得很…...

编程日记 2025/5/31 19:19:16

服务器密码安全运维解决新思路：凭据管理SMS+双因素SLA认证结合的方案

引言：云服务器安全成本困局在云计算渗透率突破60%的今天，中小企业正面临严峻的安全悖论：某权威机构数据显示，72%的云上数据泄露事件源于凭据管理不当，而传统安全解决方案的采购成本往往超过中小企业年利润的8%。这种…...

编程日记 2025/5/31 19:20:38

论文阅读笔记——In-Context Edit

ICEdit 论文阅读笔记指令图像编辑现有方法的局限： 微调类方法（InstructPix2Pix、Emu Edit、 Ultra Edit）：需要大规模数据和算力、精度高但效率低且泛化性低；免训练方法（Prompt-to-Prompt、 StableFlow&am…...

编程日记 2025/5/31 18:47:21

Debian 系统 Python 开发全解析：从环境搭建到项目实战

Debian 系统 Python 开发全解析：从环境搭建到项目实战在当今数字化时代，Python 凭借其简洁易读的语法和强大的功能，成为了最受欢迎的编程语言之一。Debian 作为一款稳定、安全且开源的 Linux 操作系统，为 Python 开发提供了理想的环境。本文将详细介绍在 Debian 系统上进…...

编程日记 2025/5/31 19:29:44

Next.js 15 与 Apollo Client 的现代集成及性能优化

Next.js 15 与 Apollo Client 的现代集成及性能优化目录技术演进集成实践性能优化应用案例未来趋势技术演进 Next.js 15 核心特性对开发模式的革新 Next.js 15 通过引入 App Router、服务器组件（Server Components）和客户端组件（Clie…...

编程日记 2025/5/31 15:50:11

【后端高阶面经：MongoDB篇】41、MongoDB 是怎么做到高可用的？

一、MongoDB高可用核心架构：副本集（Replica Set）设计 （一）副本集角色与拓扑结构 1. 三大核心角色角色职责描述资源占用选举权重数据存储Primary唯一接收写请求的节点，将操作日志（Oplog&…...

编程日记 2025/5/31 14:36:31

IO Vs NIO

一、IO(传统阻塞式) 全称‌：Input/Output(输入/输出) 定义‌：Java 1.0 引入的基础 I/O 模型，基于流（Stream）的同步阻塞操作，线程在读写数据时会阻塞直到操作完成。二、NIO(新式非阻塞式) ‌全…...

编程日记 2025/5/31 16:54:09

offset 家族和 client 家族

在前端开发中，offset 家族和 client 家族是用于获取元素尺寸和位置的重要属性集合。以下是对这两个家族相关知识点的系统总结： 一、offset 家族核心属性 offsetWidth / offsetHeight 含义：元素的总尺寸，包含内容区、内边距、边…...

编程日记 2025/5/31 19:23:25

DMBOK对比知识点整理（4）

1.常见数据质量维度常见数据质量维度（DMBOK-P353）质量维度...

编程日记 2025/5/31 15:25:38

day12 leetcode-hot100-21（矩阵4）

240. 搜索二维矩阵 II - 力扣（LeetCode） 1.暴力法O(m*n) 思路：两层for循环即可。 2.二分查找O(m*logn) 思路：每行都用二分查找,因为每行都是排好序的 class Solution {public boolean searchMatrix(int[][] matrix, int targe…...

编程日记 2025/5/31 19:02:04