展示
文章目录
- 展示
- 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 + 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)
参考资源
- 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
![[Dify] 如何应对明道云API数据过长带来的Token超限问题](https://i-blog.csdnimg.cn/direct/bc8af2b52f824fc8b23621e6504fc4be.png)
