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

2_使用 HTML5 Canvas API (1) --[HTML5 API 学习之旅]

news 来源：原创 2025/6/20 11:10:04

1.在页面中加入 canvas

在网页中加入 <canvas> 元素可以通过简单的 HTML 和 JavaScript 实现。以下是两个具体的示例，展示了如何在页面中使用 <canvas> 绘制图形和处理用户交互。

示例 1: 简单的静态绘图

这个例子展示了一个基础的 <canvas> 应用程序，它会在画布上绘制一个彩色矩形和一段文本。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Static Drawing</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>简单静态绘图示例</h1><canvas id="staticCanvas" width="400" height="300"></canvas><script>// 获取 canvas 元素和绘图上下文const canvas = document.getElementById('staticCanvas');const ctx = canvas.getContext('2d');// 设置填充颜色并绘制矩形ctx.fillStyle = 'blue';ctx.fillRect(50, 50, 200, 100);// 添加一些文本ctx.font = '24px Arial';ctx.fillStyle = 'white';ctx.textAlign = 'center';ctx.fillText('Hello Canvas!', 150, 100);</script>
</body>
</html>

在这里插入图片描述

在这个例子中：

我们定义了一个宽度为400像素、高度为300像素的 <canvas>。
使用 JavaScript 获取该元素的2D绘图上下文，并通过 fillRect 方法绘制一个蓝色矩形。
接着设置了字体样式并通过 fillText 方法在矩形内添加了一段白色文本。

示例 2: 交互式绘图（用户可以画线）

这个例子创建了一个更复杂的 <canvas> 应用程序，允许用户通过鼠标在画布上绘制线条。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Interactive Canvas Drawing</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>交互式绘图示例</h1><canvas id="interactiveCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('interactiveCanvas');const ctx = canvas.getContext('2d');let painting = false;function startPosition(e) {painting = true;draw(e);}function finishedPosition() {painting = false;ctx.beginPath();}function draw(e) {if (!painting) return;ctx.lineWidth = 5;ctx.lineCap = 'round';ctx.strokeStyle = 'black';ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);ctx.stroke();ctx.beginPath();ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);}canvas.addEventListener('mousedown', startPosition);canvas.addEventListener('mouseup', finishedPosition);canvas.addEventListener('mousemove', draw);</script>
</body>
</html>

在这里插入图片描述

在这个例子中：

我们创建了一个更大尺寸的 <canvas>（600x400），并且添加了事件监听器来捕捉用户的鼠标动作。
当用户按下鼠标按钮时，调用 startPosition 函数开始绘制；当释放鼠标按钮时，调用 finishedPosition 函数结束绘制。
在 draw 函数中，根据鼠标的当前位置绘制线条。我们还确保只在 painting 变量为 true 时才进行绘制操作，以防止意外拖动鼠标时产生不必要的线条。

这两个示例展示了如何将 <canvas> 集成到网页中，并分别演示了静态绘图和基于用户输入的交互式绘图功能。你可以根据自己的需求进一步扩展这些例子，比如添加更多图形、颜色选择、橡皮擦等功能。

2.变换

在 <canvas> 中，变换（Transformations）是通过修改绘图上下文的坐标系统来实现的。这包括平移（translate）、旋转（rotate）、缩放（scale）等操作。以下是两个具体的变换示例，展示了如何使用这些功能来创建动态和交互性的图形效果。

示例 1: 平移与旋转

这个例子展示了如何结合平移和旋转来绘制一个旋转的矩形。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Transformation Example 1</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>平移与旋转示例</h1><canvas id="transformCanvas1" width="400" height="400"></canvas><script>const canvas = document.getElementById('transformCanvas1');const ctx = canvas.getContext('2d');// 设置矩形的颜色和初始位置ctx.fillStyle = 'blue';const rectWidth = 100;const rectHeight = 50;function drawRotatedRect(angle) {// 保存当前状态ctx.save();// 平移到矩形中心作为旋转点ctx.translate(200, 200);// 旋转画布ctx.rotate(angle * Math.PI / 180); // 将角度转换为弧度// 绘制矩形（相对于新的原点）ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);// 恢复之前的状态ctx.restore();}// 绘制多个不同角度的矩形for (let i = 0; i < 360; i += 30) {drawRotatedRect(i);}</script>
</body>
</html>

在这里插入图片描述

在这个例子中：

我们定义了一个函数 drawRotatedRect，它接受一个角度参数，并根据该角度旋转并绘制一个矩形。
使用 ctx.save() 和 ctx.restore() 来保存和恢复绘图状态，确保每次变换后都能回到原始状态。
通过循环调用 drawRotatedRect 函数，在不同角度下绘制多个矩形，形成一个围绕中心点旋转的效果。

示例 2: 缩放与动画

这个例子展示了如何使用缩放变换创建一个简单的动画效果，使一个圆形逐渐放大和缩小。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Transformation Example 2</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>缩放与动画示例</h1><canvas id="transformCanvas2" width="400" height="400"></canvas><script>const canvas = document.getElementById('transformCanvas2');const ctx = canvas.getContext('2d');let scaleValue = 1.0;let direction = 1;function animateCircle() {// 清除画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 保存当前状态ctx.save();// 平移到画布中心ctx.translate(canvas.width / 2, canvas.height / 2);// 应用缩放变换ctx.scale(scaleValue, scaleValue);// 绘制圆形ctx.beginPath();ctx.arc(0, 0, 50, 0, 2 * Math.PI);ctx.fillStyle = 'red';ctx.fill();// 恢复之前的状态ctx.restore();// 更新缩放值并切换方向scaleValue += direction * 0.01;if (scaleValue > 1.5 || scaleValue < 0.5) {direction *= -1;}// 请求下一帧动画requestAnimationFrame(animateCircle);}// 开始动画animateCircle();</script>
</body>
</html>

在这里插入图片描述

在这个例子中：

我们定义了一个 animateCircle 函数，用于绘制一个红色圆形，并应用缩放变换使其看起来像是在不断放大和缩小。
使用 requestAnimationFrame 方法来创建平滑的动画效果。
通过调整 scaleValue 的值来控制缩放程度，并在达到一定界限时反转缩放方向，从而实现循环的放大和缩小效果。

这两个示例展示了如何利用 <canvas> 的变换功能来创建丰富的视觉效果。你可以根据需要进一步探索其他类型的变换组合，如倾斜（skewing），或者将这些变换应用于更复杂的图形和动画场景中。

3.路径

在 <canvas> 中，路径（Path）是创建形状的基本方式之一。路径是由直线、曲线等组成的线段序列，可以用来绘制各种图形。下面我将提供两个具体的路径示例，以展示如何使用路径来创建不同的图形。

示例 1: 绘制五角星

这个例子展示了如何使用路径和基本的绘图命令来绘制一个五角星。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Path Example 1</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>绘制五角星示例</h1><canvas id="starCanvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('starCanvas');const ctx = canvas.getContext('2d');function drawStar(cx, cy, spikes, outerRadius, innerRadius) {let rot = Math.PI / 2 * 3;let x = cx;let y = cy;let step = Math.PI / spikes;ctx.beginPath();ctx.moveTo(cx, cy - outerRadius);for (let i = 0; i < spikes; i++) {x = cx + Math.cos(rot) * outerRadius;y = cy + Math.sin(rot) * outerRadius;ctx.lineTo(x, y);rot += step;x = cx + Math.cos(rot) * innerRadius;y = cy + Math.sin(rot) * innerRadius;ctx.lineTo(x, y);rot += step;}ctx.lineTo(cx, cy - outerRadius);ctx.closePath(); // 关闭路径ctx.lineWidth = 5;ctx.strokeStyle = 'blue';ctx.stroke(); // 描边ctx.fillStyle = 'yellow';ctx.fill(); // 填充}drawStar(canvas.width / 2, canvas.height / 2, 5, 100, 50); // 在画布中心绘制五角星</script>
</body>
</html>

在这里插入图片描述

在这个例子中：

drawStar 函数接受参数来定义五角星的位置 (cx, cy)、尖角的数量 (spikes)、外圆半径 (outerRadius) 和内圆半径 (innerRadius)。
使用 ctx.beginPath() 开始新的路径，并通过一系列的 lineTo 方法来定义路径上的点。
使用 ctx.closePath() 来关闭路径，使最后一点与起始点相连。
最后使用 stroke 和 fill 方法来描边和填充五角星。

示例 2: 贝塞尔曲线路径

这个例子展示了如何使用二次贝塞尔曲线（quadratic Bezier curve）和三次贝塞尔曲线（cubic Bezier curve）来创建平滑的路径。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Path Example 2</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>贝塞尔曲线路径示例</h1><canvas id="bezierCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('bezierCanvas');const ctx = canvas.getContext('2d');// 绘制二次贝塞尔曲线ctx.beginPath();ctx.moveTo(50, 50);ctx.quadraticCurveTo(200, 10, 350, 50);ctx.strokeStyle = 'green';ctx.lineWidth = 3;ctx.stroke();// 绘制三次贝塞尔曲线ctx.beginPath();ctx.moveTo(50, 350);ctx.bezierCurveTo(150, 100, 450, 300, 550, 350);ctx.strokeStyle = 'red';ctx.lineWidth = 3;ctx.stroke();// 标记控制点ctx.fillStyle = 'black';ctx.beginPath();ctx.arc(200, 10, 5, 0, 2 * Math.PI);ctx.arc(350, 50, 5, 0, 2 * Math.PI);ctx.arc(150, 100, 5, 0, 2 * Math.PI);ctx.arc(450, 300, 5, 0, 2 * Math.PI);ctx.fill();</script>
</body>
</html>

在这里插入图片描述

在这个例子中：

我们首先使用 quadraticCurveTo 方法来绘制一条从 (50, 50) 到 (350, 50) 的二次贝塞尔曲线，其中 (200, 10) 是控制点。
然后使用 bezierCurveTo 方法来绘制一条从 (50, 350) 到 (550, 350) 的三次贝塞尔曲线，其中 (150, 100) 和 (450, 300) 是两个控制点。
最后，我们用小圆圈标记了所有控制点的位置，以便更清晰地看到贝塞尔曲线是如何被控制点影响的。

这两个示例展示了如何利用 <canvas> 的路径功能来创建复杂且平滑的图形。你可以根据需要调整这些路径的参数，或者探索更多关于路径的操作方法，如添加弧线、矩形等其他形状。

4.描边样式

在 <canvas> 中，描边样式可以通过设置 strokeStyle 属性来改变。这个属性可以接受颜色、渐变或模式作为其值。下面我将提供两个具体的描边样式示例，以展示如何使用不同的描边样式。

示例 1: 使用纯色和渐变作为描边样式

此示例展示了如何使用纯色以及线性渐变来设置路径的描边样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Stroke Style Example 1</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>纯色与渐变描边样式示例</h1><canvas id="colorGradientCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('colorGradientCanvas');const ctx = canvas.getContext('2d');// 纯色描边ctx.strokeStyle = 'blue'; // 设置描边颜色为蓝色ctx.lineWidth = 5;ctx.beginPath();ctx.moveTo(50, 50);ctx.lineTo(550, 50);ctx.stroke();// 线性渐变描边let gradient = ctx.createLinearGradient(0, 100, 600, 100);gradient.addColorStop(0, 'red'); // 开始颜色为红色gradient.addColorStop(0.5, 'yellow'); // 中间颜色为黄色gradient.addColorStop(1, 'green'); // 结束颜色为绿色ctx.strokeStyle = gradient; // 设置描边颜色为渐变ctx.beginPath();ctx.moveTo(50, 150);ctx.lineTo(550, 150);ctx.stroke();</script>
</body>
</html>

在这里插入图片描述

在这个例子中：

我们首先设置了 strokeStyle 为纯色（‘blue’），并用它绘制了一条水平线。
接着创建了一个线性渐变，并通过 addColorStop 方法定义了渐变的颜色停止点。然后我们使用这个渐变作为描边样式来绘制另一条水平线。

示例 2: 使用图案作为描边样式

这个例子展示了如何使用一个图像作为描边样式，即创建一个图案（Pattern）对象。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Stroke Style Example 2</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>图案描边样式示例</h1><canvas id="patternCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('patternCanvas');const ctx = canvas.getContext('2d');// 创建一个小图案用于描边const patternCanvas = document.createElement('canvas');patternCanvas.width = 20;patternCanvas.height = 20;const patternCtx = patternCanvas.getContext('2d');patternCtx.fillStyle = 'red';patternCtx.fillRect(0, 0, 10, 10); // 绘制左上角的红色方块patternCtx.fillStyle = 'blue';patternCtx.fillRect(10, 10, 10, 10); // 绘制右下角的蓝色方块// 将图案应用到主画布上的线条描边const pattern = ctx.createPattern(patternCanvas, 'repeat'); // 创建重复的图案ctx.strokeStyle = pattern;ctx.lineWidth = 20;ctx.lineCap = 'round'; // 圆头线帽ctx.beginPath();ctx.moveTo(50, 300);ctx.lineTo(550, 300);ctx.stroke();</script>
</body>
</html>

在这里插入图片描述

在这个例子中：

我们创建了一个小的辅助 <canvas> 元素，并在其上绘制了简单的图案（本例中是一个红蓝相间的格子）。
然后使用 createPattern 方法基于该辅助 <canvas> 创建了一个图案对象，并将其设置为 strokeStyle。
最后我们用这个图案样式绘制了一条宽线，线的端点被设置为圆头（lineCap = 'round'），以便更美观地展示图案效果。

这两个示例展示了如何利用 <canvas> 的描边样式功能来实现多样化的效果。你可以根据需要调整这些描边样式的参数，或者探索更多关于描边和其他绘图属性的方法。

5.填充样式

在 <canvas> 中，填充样式可以通过设置 fillStyle 属性来改变。这个属性同样可以接受颜色、渐变或模式作为其值。下面我将提供两个具体的填充样式示例，以展示如何使用不同的填充样式。

示例 1: 使用纯色和径向渐变作为填充样式

此示例展示了如何使用纯色以及径向渐变来设置图形的填充样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Fill Style Example 1</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>纯色与径向渐变填充样式示例</h1><canvas id="colorRadialGradientCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('colorRadialGradientCanvas');const ctx = canvas.getContext('2d');// 纯色填充ctx.fillStyle = 'green'; // 设置填充颜色为绿色ctx.fillRect(50, 50, 150, 100); // 绘制一个矩形并填充// 径向渐变填充let gradient = ctx.createRadialGradient(350, 150, 30, 350, 150, 80);gradient.addColorStop(0, 'red'); // 内圈颜色为红色gradient.addColorStop(1, 'blue'); // 外圈颜色为蓝色ctx.fillStyle = gradient; // 设置填充颜色为径向渐变ctx.beginPath();ctx.arc(350, 150, 80, 0, Math.PI * 2, false); // 创建一个圆ctx.fill(); // 填充圆形</script>
</body>
</html>

在这里插入图片描述

在这个例子中：

我们首先设置了 fillStyle 为纯色（‘green’），并用它绘制了一个矩形。
接着创建了一个径向渐变，并通过 addColorStop 方法定义了渐变的颜色停止点。然后我们使用这个渐变作为填充样式来绘制并填充了一个圆形。

示例 2: 使用图案作为填充样式

这个例子展示了如何使用一个图像作为填充样式，即创建一个图案（Pattern）对象。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Fill Style Example 2</title><style>body { font-family: Arial, sans-serif; }canvas { border: 1px solid black; display: block; margin: 20px auto; }</style>
</head>
<body><h1>图案填充样式示例</h1><canvas id="patternFillCanvas" width="600" height="400"></canvas><script>const canvas = document.getElementById('patternFillCanvas');const ctx = canvas.getContext('2d');// 创建一个小图案用于填充const patternCanvas = document.createElement('canvas');patternCanvas.width = 20;patternCanvas.height = 20;const patternCtx = patternCanvas.getContext('2d');patternCtx.fillStyle = 'yellow';patternCtx.fillRect(0, 0, 20, 20); // 绘制黄色背景patternCtx.fillStyle = 'black';patternCtx.beginPath();patternCtx.arc(10, 10, 8, 0, Math.PI * 2, true); // 创建一个小黑圆patternCtx.fill();// 将图案应用到主画布上的图形填充const pattern = ctx.createPattern(patternCanvas, 'repeat'); // 创建重复的图案ctx.fillStyle = pattern;ctx.beginPath();ctx.arc(300, 250, 100, 0, Math.PI * 2, false); // 创建一个大圆ctx.fill(); // 使用图案填充圆形</script>
</body>
</html>

在这里插入图片描述

在这个例子中：

我们创建了一个小的辅助 <canvas> 元素，并在其上绘制了一个简单的图案（本例中是一个带有黑色圆点的黄色方块）。
然后使用 createPattern 方法基于该辅助 <canvas> 创建了一个图案对象，并将其设置为 fillStyle。
最后我们用这个图案样式填充了一个较大的圆形，使得圆形内部充满了重复的小图案。

这两个示例展示了如何利用 <canvas> 的填充样式功能来实现多样化的效果。你可以根据需要调整这些填充样式的参数，或者探索更多关于填充和其他绘图属性的方法。

2_使用 HTML5 Canvas API (1) --[HTML5 API 学习之旅]

1.在页面中加入 canvas 在网页中加入 <canvas> 元素可以通过简单的 HTML 和 JavaScript 实现。以下是两个具体的示例，展示了如何在页面中使用 <canvas> 绘制图形和处理用户交互。示例 1: 简单的静态绘图这个例子展示了一个基础的 <canvas> 应…...

编程日记 2025/6/20 11:10:04

梳理你的思路(从OOP到架构设计)_UML应用：业务内涵的分析抽象表达01

目录 1、系统分析(System Analysis) 系統分析的涵意业务(领域)知识业务内涵业务(领域)概念 2、举例(一) ：东方传说 UML与建模工具 1、系统分析(System Analysis) 系統分析的涵意许多人在学习系统分析(System Analysis)时，常迷失于其字面上…...

编程日记 2025/6/2 9:49:09

redis集群安装部署 redis三主三从集群

redis集群安装部署 redis三主三从集群 1、下载redis2、安装redis集群三主三从3、配置redis开机自启动3.1、建立启动脚本3.2、复制多份redis启动脚本给集群使用3.3、添加可执行权限3.4、配置开机自启动 1、下载redis 本次redis安装部署选择当前最新的稳定版本7.4.1 下载链接: …...

编程日记 2025/6/20 22:16:56

【PHP】部署和发布PHP网站到IIS服务器

欢迎来到《小5讲堂》这是《PHP》系列文章，每篇文章将以博主理解的角度展开讲解。温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！ 目录前言安装PHP稳定版本线程安全版解压使用 PHP配置配置文件扩展文件路径…...

编程日记 2025/6/19 20:53:55

大模型qiming面试内容整理-系统设计与架构

在大模型和机器学习相关岗位的面试中，系统设计与架构的考察通常会涉及如何设计一个可扩展、可靠且高效的机器学习系统，特别是在面对大规模数据和复杂模型时。这一部分的考察不仅测试候选人对机器学习和深度学习的理解，还会评估其如何设计实际生产环境中的系统来满足需求。以…...

编程日记 2025/6/4 0:09:47

【Reading Notes】Favorite Articles from 2024

文章目录 1、January2、February3、March4、April5、May6、June7、July8、August9、September10、October11、November12、December 1、January 2、February 3、March Sora外部测试翻车了！3个视频都有Bug（ 2024年03月01日） 不仔细看还真看不…...

编程日记 2025/6/3 18:07:03

Qt-chart 画柱状图

记录下，记录下效果图直接上代码 // 创建柱状系列 QBarSeries *series new QBarSeries();// 创建数据集 QBarSet *setTar new QBarSet(("tar"));QBarSet *setReality new QBarSet(("reality"));//添加柱状数据*setTar << 1<<…...

编程日记 2025/6/20 15:49:34

【深入理解Java线程池】

深入理解Java线程池 Java线程池是Java并发编程中的一个重要概念，它提供了一种管理和复用线程的机制，可以显著减少创建和销毁线程的开销，提高系统的响应速度和吞吐量。以下是对Java线程池的详细解析： 一、线程池的基本概念线程…...

编程日记 2025/6/19 21:24:47

honle电源控制器维修UV灯高压电源EVG EPS200

UV电源控制器维修；honle电源维修；UV电源维修MUC-Steuermodul 2 LΛmpen D-82166 主要维修型号： EPS 60/120、EPS 100、EPS200、EPS 220、EPS 340、LED Spot 100、UV2000F HONLE UV灯高压电源控制器故障包括： 1、电压不稳&#…...

编程日记 2025/6/3 8:12:49

java中List集合小练习

题目：将1~100之间所有正整数存放在一个List集合中，并将集合索引位置时10的对象从集合中移除。代码： import java.util.ArrayList; import java.util.List;public class ListTest {public ListTest(){List<Integer> listnew ArrayLis…...

编程日记 2025/6/3 8:12:44

【STM32练习】基于STM32的PM2.5环境监测系统

一.项目背景最近为了完成老师交付的任务，遂重制了一下小项目用STM32做一个小型的环境监测系统。项目整体示意框图如下： 二.器件选择单片机（STM32F103）数字温湿度模块（DHT11）液晶显示模块（0.8…...

编程日记 2025/6/3 8:12:38

JS哪些操作会造成内存泄露？

在 JavaScript 中，内存泄露是指程序不再使用的内存没有被释放，从而导致内存的持续增长，最终可能导致性能下降或应用崩溃。以下是一些常见的可能导致内存泄露的操作和情况： 1. 全局变量如果不小心创建了全局变量，可能…...

编程日记 2025/6/20 22:12:02

《知识拓展 · 统一建模语言UML》

📢 大家好，我是【战神刘玉栋】，有10多年的研发经验，致力于前后端技术栈的知识沉淀和传播。 💗 🌻 CSDN入驻不久，希望大家多多支持，后续会继续提升文章质量，绝不滥竽充数…...

编程日记 2025/6/19 19:46:55

GNSS 全球卫星导航系统（Global Navigation Satellite System）: 卫星授时

文章目录引言I GNSSGNSS三大核心能力卫星系统、区域性的系统以及增强系统II 卫星授时GNSS是如何实现授时优势引言 GNSS指的是全球卫星导航系统，是能在全球范围内提供导航服务的卫星导航系统的通称。美国GPS、俄罗斯GLONASS、中国北斗卫星导航系统和欧洲GALILEO，是联合国全…...

编程日记 2025/6/2 11:54:13

【数据结构】循环队列原理与代码

理论存在的意义： 将顺序队列从逻辑上视为一个环。解决“假溢出”（出队入队连续操作后两个指针均到数组末端maxsize-1处，虽然队里没有元素但无法让元素进队）。两种定义 1.题目是队列非空时队头指针和队尾指针分别指向队头元素和队…...

编程日记 2025/6/20 11:40:03

Kettle Doris Plugin编译过程

起因公司的数据中台产品用的doris作为数据仓库，用kettle作为etl引擎，但是表输出组件太慢了。偶然有一天发现doris提供了kettle组件，但是需要自己编译，于是就开始自己编译。坑因为kettle的依赖包在m2（中央仓库&am…...

编程日记 2025/6/1 10:49:01

Day10 苍穹外卖项目订单搜索、各个状态的订单统计、查询订单详细、接单、拒单、取消订单、派送订单、完成订单

目录 1.订单搜索 1.1 需求分析和设计 1.2 接口设计 1.2 代码实现 1.2.1 admin/OrderController 1.2.2 OrderService 1.2.3 OrderServiceImpl 2.各个状态的订单数量统计 2.1 需求分析和设计 2.2 接口设计 2.3 代码实现 2.3.1 admin/OrderController 2.3.2 OrderService 2.3.3 Or…...

编程日记 2025/5/30 10:22:27

你知道OSI参考模型是什么吗？

你知道OSI参考模型是什么吗？ 一. OSI模型图解二. OSI七层模型三. OSI模型的特点四. OSI模型与TCP/IP模型的对比五. 总结前言这是我在这个网站整理的笔记,有错误的地方请指出，关注我，接下来还会持续更新。作者：神的孩子都在歌唱…...

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

《开源数据：开启信息共享与创新的宝藏之门》

《开源数据：开启信息共享与创新的宝藏之门》一、开源数据概述（一）开源数据的定义（二）开源数据的发展历程二、开源数据的优势（一）成本效益优势（二）灵活性与可定制性&…...

编程日记 2025/6/3 10:35:59

机器学习之学习范式

机器学习的四种主要范式分别是：监督学习、非监督学习、强化学习和半监督学习。以下是每种范式的详细介绍： 1. 监督学习（Supervised Learning） 定义： 通过已标注的数据训练模型，以预测或分类未知数据。目…...

编程日记 2025/6/20 6:16:53

计算机网络技术基础：5.数据通信系统

一、数据通信的基本概念 1.信息信息是对客观事物的运动状态和存在形式的反映，可以是客观事实的形态、大小、结构、性能等描述，也可以是客观事物与外部之间的联系。信息的载体可以是数字、文字、语音、图形和图像等。计算机及其外围设备产生和交换的信息…...

编程日记 2025/6/2 17:14:15

ubuntu下anconda装pytorch

1、禁用nouveau sudo vim /etc/modprobe.d/blacklist.conf 在文件最后部分插入以下两行内容 blacklist nouveau options nouveau modeset0 更新系统 sudo update-initramfs -u 重启系统 2、装nvidia驱动卸载原来驱动 sudo apt-get remove nvidia-* （若安装…...

编程日记 2025/6/4 0:54:13

【深入理解MySQL索引】

深入理解MySQL索引 MySQL索引是一种数据结构，用于帮助快速查找和检索数据库表中的数据。以下是对MySQL索引的详细解释，并附有相应的代码示例以加深理解。一、索引的原理及作用原理：索引是以数据库表中的“列”为维度建立的，通…...

编程日记 2025/6/3 8:12:13

Linux 中批量添加cron定时任务的方法

目录方法一：通过 crontab 命令批量添加方法二：通过直接修改 crontab 文件方法一：通过 crontab 命令批量添加 1、先将需要添加 cron 执行的多条定时任务写入一个文本文件例如： 0 3 * * * /bin/bash /root/work/job/MySQLBack.…...

编程日记 2025/6/4 17:23:23

【OSS】php使用oss存储

阿里云oss官方文档：文档 1、前期工作创建阿里云账号，登录创建bucket，注意修改权限，要不然可能读取不到申请accessKeyId和accessKeySecret accessKey 2、项目中安装OSS扩展 composer require aliyuncs/oss-sdk-php3、基础使…...

编程日记 2025/6/4 16:23:23

个人ffmpeg笔记（一）

环境安装 QT环境安装运行qt…run安装下载地址：https://download.qt.io/archive/qt/ 下载地址：https://download.qt.io/archive/qt/5.12/5.12.10/ sudo apt install --reinstall libxcb-xinerama0 解决xcb问题 Ubuntu16.04打开Qt显示/home/user/.co…...

编程日记 2025/6/3 0:42:55

Python的3D可视化库【vedo】2-3 (plotter模块) 增删物体、控制相机

文章目录 4 Plotter类的方法4.3 渲染器内的物体操作4.3.1 添加物体4.3.2 移除物体4.3.3 渲染器的内容列表 4.4 相机控制4.4.1 访问相机对象4.4.2 重置相机状态4.4.3 移动相机位置4.4.4 改变相机焦点4.4.5 改变相机朝向的平面4.4.5 旋转相机4.4.6 对齐相机的上朝向4.4.7 缩放 ve…...

编程日记 2025/6/20 21:57:57

关于QMessageBox的一些使用总结和避坑指南

参考学习 Qt中QMessageBox的用法—看这一篇就够了 Qt：使用QMessageBox弹出标准对话框 QMessageBox模态与非模态及QT中的exec() 如何调整QMessageBox的大小 QSS 自定义QMessageBox python QMessageBox设置标签和按钮居中、中文按钮使用建议经过查看多方的资料&…...

编程日记 2025/6/3 18:20:15

LearnOpenGL学习（高级OpenGL -＞高级GLSL，几何着色器，实例化）

高级GLSL 内建变量顶点着色器 gl_PointSoze : float 输出变量，用于控制渲染 GL_POINTS 型图元时，点的大小。可用于粒子系统。将其设置为 gl_Position.z 时，可以使点的距离越远，大小越大。创建出类似近视眼看远处灯光的效果 gl…...

编程日记 2025/6/4 15:44:57

for X_batch, y_batch in dataloader ，其中y_batch想转成list

for X_batch, y_batch in dataloader ，其中y_batch想转成list for X_batch, y_batch in dataloader:# y_batch数据类型的是 tensor组成的list# 初始化一个空列表来存储展平后的数据y_batch_flat []# 遍历y_batch 这个list中的每个张量for tensor in y_batch:# 展平…...

编程日记 2025/6/4 1:08:50

Kruskal最小生成树算法正确性证明

Kruskal: 每次考虑最短一条边, 如果会形成回路则不选择该边, 如果不会形成回路则选择该边, 直到选出了n-1条边要点: 每次都选择不会形成回路的最短边数学归纳法 ① n<2时, 显然成立 ② 设n k时成立, 则当n k1时: 将图划分为子图A(k) 和 B(1) ∵ n k时成立 ∴ A(k)可…...

编程日记 2025/6/4 1:11:52

操作系统（12）内存分配

前言操作系统内存分配是操作系统内存管理的重要组成部分，涉及将物理内存分配给各个程序以使用的过程。一、内存分配的基本概念内存分配指的是操作系统将物理内存分配给程序以使用。操作系统通过内存分配，确保每个程序都能获得足够的内存资源来执行其任…...

编程日记 2025/6/3 13:29:51

oracle client linux服务器安装教程

p13390677_112040_Linux-x86-64_4of7.zip 安装前，确认/etc/hosts文件已配置正确 cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4 ::1 localhost localhost.localdomain localhost6 localhost6.localdomain6 10.2…...

编程日记 2025/5/31 5:18:35

生信技能65 - SRA数据库公共数据自动化下载及SRA批量自动化拆分

根据NCBI Metadata数据表，实现SRA数据库公共数据自动化下载及SRA批量自动化拆分。 1. 程序逻辑根据SraRunTable.csv自动从公共数据库下载SRA文件；模式0（默认）为下载模式，模式1为拆分模式，拆分支持进度显示；提取Metadata关键信息数据，重新写入新的文本文件。2. 运行示…...

编程日记 2025/6/4 1:10:19

ubuntu+ros新手笔记（五）：初探anaconda+cuda+pytorch

深度学习三件套：初探anacondacudapytorch 系统ubuntu22.04 ros2 humble 1.初探anaconda 1.1 安装安装过程参照【详细】Ubuntu 下安装 Anaconda 1.2 创建和删除环境创建新环境 conda create -n your_env_name pythonx.x比如我创建了一个名为“py312“的环境…...

编程日记 2025/6/4 15:28:09

下载红米Note 9 Pro5G对应的LineageOS代码下载及编译

构建 LineageOS 进入网站：Info about gauguin | LineageOS Wiki，点击：Build for yourself，里面有详细的教程，我这里就按照Note 9 Pro 5G来。机器环境 Ubuntu环境为：20.04.6LinagesOS版本：21-…...

编程日记 2025/6/3 8:12:00

数据链路层(Java)(MAC与IP的区别)

以太网协议： "以太⽹" 不是⼀种具体的⽹络, ⽽是⼀种技术标准; 既包含了数据链路层的内容, 也包含了⼀些物理层的内容. 例如: 规定了⽹络拓扑结构, 访问控制⽅式, 传输速率等; 例如以太⽹中的⽹线必须使⽤双绞线; 传输速率有10M, 100M, 1000M等; 以太…...

编程日记 2025/6/3 19:22:30

Unity中Mesh重叠顶点合并参考及其应用

在Unity中，如果将一个模型文件（比如从max里面导出一个fbx文件）导入到编辑器中之后，Unity会把所有在原来在面列表中公用的顶点复制一份，保证每个三角形使用的顶点都是单独的，不与其它三角形共用顶点&#xf…...

编程日记 2025/6/20 18:34:26

Day3——墨刀原型设计

墨刀介绍墨刀（Mockplus）是一款流行的在线原型设计和协作工具，适用于网页和移动应用的设计。以下是墨刀的一些主要特点和功能： 主要特点： 快速原型设计：墨刀提供了一系列的设计工具和组件，可…...

编程日记 2025/6/3 10:35:45

【JAVA】Java项目实战—移动端项目：天气查询APP

在移动互联网时代，天气查询应用程序（APP）是日常生活中不可或缺的一部分。无论是出门旅行、上班通勤，还是安排户外活动，获取实时天气信息都至关重要。Java作为一种强大且广泛使用的编程语言，特别适合用于开发…...

编程日记 2025/6/3 10:35:41

P1208 [USACO1.3] 混合牛奶 Mixing Milk(py)

题目描述由于乳制品产业利润很低，所以降低原材料（牛奶）价格就变得十分重要。帮助 Marry 乳业找到最优的牛奶采购方案。 Marry 乳业从一些奶农手中采购牛奶，并且每一位奶农为乳制品加工企业提供的价格可能相同。此外&#xff0c…...

编程日记 2025/6/3 10:35:39

day13 python（1）——python基础

【没有所谓的运气🍬，只有绝对的努力✊】 1、python简介 1.1 为什么学习python 1.2 python发展历史 python2.x和python3.x 版本里面有些是不兼容的。（我自己本地版本 3.11） 2、语言的分类 （1）编译型 …...

编程日记 2025/6/2 22:49:19

Tomcat原理（5）——tomcat最终实现

目录一、什么是Servlet容器二、ServletConfigMapping构建实现容器 ServletConfigMapping MyTomcat 三、优化server Server MyTomcat 四、匹配代码如下： 测试如下： 上一篇博客已经为介绍了servelet的实现 ，这篇对上一篇博客进行补…...

编程日记 2025/6/3 10:35:27

善战者与细

《孙子兵法》说：善战者无赫赫战功。《道德经》说：天下大事必做于细。这两句话，可以结合来思考。如果，我们把事业，拆解为多个小项目，小项目拆解为小行动，也就是天下大事作于细。这种情况下&am…...

编程日记 2025/6/4 13:48:47

sqli-labs靶场第26-30关

第26关这关将逻辑运算符，注释符以及空格给过滤了我们先使用单引号进行闭合这时我们查看源代码可以看到这一关过滤了很多字符可以看到这里将or and / -- # 空格等字符都被注释了空格被过滤了我们可以使用()来代替，and和or可以使用双写来绕过因为…...

编程日记 2025/6/4 6:37:05

ffmpeg和ffplay命令行实战手册

文章目录视频拼接用concat视频分段拼接(ffplay 不可调用seek函数进行seek)给视频添加黑边，让视频填充并居中显示不同分辨率视频分段拼接，并且，设置单个视频的缩放比例和摆放位置视频画中画复杂嵌套用overlay(ffplay 可调用seek函数进行seek)…...

编程日记 2025/6/20 10:22:53

240004】基于maven的java+ssm+mysql的房屋租赁系统的设计与实现

基于ssmmavenmysql的房屋租赁系统的设计与实现 1.项目描述2.运行环境3.项目截图4.源码获取 1.项目描述该项目在原有的基础上进行了优化，包括新增了注册功能，房屋模糊查询功能，管理员和用户信息管理等功能，以及对网站界面进行了优…...

编程日记 2025/6/3 10:35:17

2.metagpt中的软件公司智能体 (ProductManager 角色)

1. 代码 ProductManager 类 from metagpt.actions import UserRequirement, WritePRD from metagpt.actions.prepare_documents import PrepareDocuments from metagpt.roles.role import Role, RoleReactMode from metagpt.utils.common import any_to_nameclass ProductMan…...

编程日记 2025/6/3 8:11:44

MOS管振铃现象

1，什么是振铃用MOS管作为电子开关电路如下单片机输出的PWM波形应该是规整的方波信号。但实际上确出现了下图的不稳定波形。这种上升沿和下降沿出现的不同程度的一小段震荡就叫做MOS管的振铃。如果振铃的峰值超过G端耐压，GS之间就会被击穿，…...

编程日记 2025/6/19 23:03:21

docker简单命令

docker images 查看镜像文件 docker ps -a 查看容器文件 docker rm 0b2 删除容器文件，id取前三位即可 docker rmi e64 删除镜像文件（先删容器才能删镜像），id取前三位即可在包含Dockerfile文件的目录…...

编程日记 2025/6/2 11:45:42

1.在页面中加入 canvas

示例 1: 简单的静态绘图

示例 2: 交互式绘图（用户可以画线）

2.变换

示例 1: 平移与旋转

示例 2: 缩放与动画

3.路径

示例 1: 绘制五角星

示例 2: 贝塞尔曲线路径

4.描边样式

示例 1: 使用纯色和渐变作为描边样式

示例 2: 使用图案作为描边样式

5.填充样式

示例 1: 使用纯色和径向渐变作为填充样式

示例 2: 使用图案作为填充样式

相关文章：