满天星之canvas实现【canvas】
展示
文章目录
- 展示
- 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 元素（这些内容将会在不支持<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