展示
文章目錄
- 展示
- 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
