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

canvas基础+应用+实例

news 2025/7/6 3:46:49

文章目录

- Canvas基础知识要点
- 一、基本概念
- 二、常用参数
- 三、实例
- 四、场景应用说明
- 完结

Canvas基础知识要点

一、基本概念

Canvas是HTML5中的一个标签，用于在网页上通过JavaScript绘制图形、动画等。它提供了一个空白的、基于像素的绘图区域，就像一块画布，开发者可以在上面使用JavaScript的API来绘制各种图形。

二、常用参数

beginPath、moveTo、lineTo和strokeStyle的应用
- 以下是一个简单的示例，使用canvas绘制一个三角形。
```
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');// 设置线条颜色ctx.strokeStyle = 'blue';// 开始一个新路径ctx.beginPath();// 移动到起始点ctx.moveTo(50, 50);// 绘制第一条边ctx.lineTo(150, 50);// 绘制第二条边ctx.lineTo(100, 150);// 闭合路径（对于填充图形很重要，这里主要是为了展示完整路径）ctx.closePath();// 绘制线条ctx.stroke();
</script>
```
- 在这个例子中：
  - beginPath用于开始一个新的绘制路径。这是很重要的，因为如果不使用它，后续的绘制命令会和之前的路径合并。
  - moveTo将绘图“笔尖”移动到指定的坐标(50, 50)，这个点是三角形的一个顶点。
  - lineTo用于从当前点（由moveTo指定或者上一个lineTo结束的点）绘制一条直线到指定的坐标。这里绘制了三角形的两条边。
  - strokeStyle用于设置线条的颜色，这里设置为蓝色。最后stroke方法用于实际绘制路径的轮廓。

arc的应用

下面的示例绘制一个圆形。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');ctx.beginPath();// 圆心坐标为(100, 100)，半径为50，起始角度为0，结束角度为2 * Math.PI（一个完整的圆）ctx.arc(100, 100, 50, 0, 2 * Math.PI);ctx.strokeStyle ='red';ctx.stroke();
</script>

对于arc方法：
- 它的参数依次是圆心的x坐标、圆心的y坐标、圆的半径、起始弧度和结束弧度。这里通过设置起始弧度为0，结束弧度为2 * Math.PI（约等于6.28）来绘制一个完整的圆。圆心坐标为(100, 100)，半径为50。最后设置线条颜色为红色并绘制出圆形。

quadraticCurveTo的应用
- 这个方法用于绘制二次贝塞尔曲线。下面是一个简单的示例，绘制一条二次贝塞尔曲线。
```
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');ctx.beginPath();ctx.moveTo(20, 180);// 控制点坐标为(100, 20)，结束点坐标为(180, 180)ctx.quadraticCurveTo(100, 20, 180, 180);ctx.strokeStyle = 'green';ctx.stroke();
</script>
```
- 解释：
  - 首先moveTo将起始点设置为(20, 180)。然后quadraticCurveTo方法用于绘制二次贝塞尔曲线，它有三个参数。第一个参数是控制点的x坐标，第二个参数是控制点的y坐标，第三个参数是曲线结束点的x坐标和y坐标。在这个例子中，控制点是(100, 20)，结束点是(180, 180)。最后设置线条颜色为绿色并绘制出曲线。
渐变的应用（线性渐变）
- 以下示例展示如何在canvas中使用线性渐变。
```
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');// 创建一个线性渐变对象const linearGradient = ctx.createLinearGradient(0, 0, 200, 0);linearGradient.addColorStop(0,'red');linearGradient.addColorStop(1, 'blue');ctx.beginPath();ctx.lineWidth = 50;ctx.moveTo(0, 0);ctx.lineTo(200, 0);ctx.strokeStyle = linearGradient;ctx.stroke();
</script>
```
- 步骤如下：
  - 首先使用createLinearGradient方法创建一个线性渐变对象。它的参数是渐变的起始点x坐标、起始点y坐标、结束点x坐标和结束点y坐标。这里创建的是一个从左到右（x轴方向）的渐变。
  - 然后使用addColorStop方法为渐变添加颜色停止点。第一个参数是位置（取值范围是0到1），第二个参数是颜色。这里在0位置添加红色，在1位置添加蓝色。
  - 接着开始路径，绘制一条直线（从(0, 0)到(200, 0)），并将strokeStyle设置为刚才创建的线性渐变，最后绘制出渐变线条。
填充应用（fill）
- 以下示例绘制一个填充颜色的矩形。
```
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');ctx.beginPath();ctx.rect(50, 50, 100, 100);ctx.fillStyle = 'yellow';ctx.fill();
</script>
```
- 解释：
  - 首先beginPath开始一个新路径，然后rect方法用于定义一个矩形，它的参数依次是矩形左上角的x坐标、左上角的y坐标、矩形的宽度和高度。这里定义了一个左上角坐标为(50, 50)，宽度为100，高度为100的矩形。
  - fillStyle设置填充颜色为黄色，最后fill方法用于填充这个矩形。。

三、实例

绘制一个笑脸
效果图如下：
在这里插入图片描述

<!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></head><body><!-- id：标识元素的唯一性width:画布的宽度height:画布的高度--><canvas id="c1" width="600" height="400">当前浏览器不支持canvas，请下载最新的浏览器<a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a></canvas><script>// 1. 找到画布var c1 = document.getElementById("c1");// 判断是否有getContextif (!c1.getContext) {console.log("当前浏览器不支持canvas，请下载最新的浏览器");}// 2. 获取画笔，上下文对象var ctx = c1.getContext("2d");ctx.beginPath();//  绘制一张脸ctx.arc(75, 75, 50, 0, Math.PI * 2);ctx.stroke();ctx.closePath();ctx.beginPath();// 绘制嘴巴ctx.arc(75, 75, 35, 0, Math.PI);ctx.stroke();ctx.closePath();ctx.beginPath();// 绘制左眼ctx.arc(60, 65, 5, 0, Math.PI * 2);ctx.stroke();ctx.closePath();ctx.beginPath();// 绘制右眼ctx.arc(90, 65, 5, 0, Math.PI * 2);ctx.closePath();ctx.stroke();</script></body>
</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><style>* {margin: 0;padding: 0;}#ggk {width: 600px;height: 400px;font-size: 30px;font-weight: 900;text-align: center;line-height: 400px;overflow: hidden;position: absolute;left: 0;top: 0;}canvas {position: absolute;left: 0;top: 0;z-index: 10;}</style></head><body><!-- id：标识元素的唯一性width:画布的宽度height:画布的高度--><div id="ggk">谢谢惠顾</div><canvas id="c1" width="600" height="400"></canvas><script>// 1. 找到画布var c1 = document.getElementById("c1");// 2. 获取画笔，上下文对象var ctx = c1.getContext("2d");// 3. 绘制图形let img = new Image();img.src = "./imgs/m2.png";img.onload = function () {ctx.drawImage(img, 0, 0, 600, 400);};var isDraw = false;c1.onmousedown = function () {isDraw = true;};c1.onmouseup = function () {isDraw = false;};c1.onmousemove = function (e) {if (isDraw) {var x = e.pageX;var y = e.pageY;ctx.globalCompositeOperation = "destination-out";ctx.arc(x, y, 20, 0, 2 * Math.PI);ctx.fill();}};let random = Math.random();if (random < 0.1) {var ggkDiv = document.querySelector("#ggk");ggkDiv.innerHTML = "恭喜您获得canvas 惊喜镜头大奖！";}</script></body>
</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></head><body><!-- id：标识元素的唯一性width:画布的宽度height:画布的高度--><canvas id="c1" width="600" height="400">当前浏览器不支持canvas，请下载最新的浏览器<a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a></canvas><script>// 1. 找到画布var c1 = document.getElementById("c1");// 判断是否有getContextif (!c1.getContext) {console.log("当前浏览器不支持canvas，请下载最新的浏览器");}// 2. 获取画笔，上下文对象var ctx = c1.getContext("2d");// 文字，大小/字体ctx.strokeStyle = "#ff0000";ctx.font = "100px Microsoft YaHei";// 填充渲染文字// fillText(文本，文本的起点x,文本起点的y,绘制文字最大的宽度)// ctx.fillText("你好", 300, 200, 100);// 文本对齐选项textAlign,start(默认),end,left,right,centerctx.textAlign = "center";// 文本基线对齐,textBaseline,top,bottom,alphabeticctx.textBaseline = "middle";// 文本的方向// ctx.direction = "rtl";// 预测量文本宽度let text = ctx.measureText("Hello world!");console.log(text);ctx.strokeText("Hello world!", 300, 200);ctx.arc(270, 200, 5, 0, 2 * Math.PI);ctx.fill();</script></body>
</html>

四、场景应用说明

数据可视化
- Canvas在数据可视化领域应用广泛。例如，可以使用Canvas绘制柱状图、折线图、饼图等。
- 以绘制简单的柱状图为例，通过获取数据集中每个数据项的值，根据画布的尺寸和数据范围，使用fillRect方法绘制不同高度的矩形来表示数据。这样可以直观地展示数据的大小关系和分布情况。
游戏开发
- 在网页游戏开发中，Canvas是重要的工具。可以用于绘制游戏角色、地图、道具等各种游戏元素。
- 例如，在一个2D横版过关游戏中，通过不断更新游戏角色的位置（使用translate等方法），并重新绘制游戏场景（包括背景、障碍物、敌人等），实现游戏的动态效果。同时，可以通过处理用户的输入事件（如键盘按键或鼠标点击）来控制游戏角色的行为。
动画制作
- Canvas可以制作各种动画，如简单的图形动画、加载动画等。
- 比如制作一个旋转的正方形动画。通过setInterval或requestAnimationFrame函数，在每一帧中更新正方形的旋转角度，然后重新绘制这个带有旋转效果的正方形，从而实现动画效果。requestAnimationFrame是更推荐的方式，因为它会根据浏览器的刷新率来优化动画的性能。

完结

在这里插入图片描述

canvas基础+应用+实例

文章目录 Canvas基础知识要点一、基本概念二、常用参数三、实例四、场景应用说明完结 Canvas基础知识要点一、基本概念 Canvas是HTML5中的一个标签，用于在网页上通过JavaScript绘制图形、动画等。它提供了一个空白的、基于像素的绘图区域，就像一块画布…...

编程日记 2024/10/30 1:25:59

Linux命令用户操作简介

目录 1. 添加新的用户账号 2. 删除用户账号 3. 修改用户账号 4. 用户口令的管理示例汇总添加新用户删除用户修改用户信息更改用户口令在 Linux 系统中，用户管理是一项重要的任务，包括添加新用户、删除用户、修改用户信息以及管理用户口令…...

编程日记 2024/10/30 1:24:58

大语言模型的Scaling Law【Power Low】

NLP-大语言模型学习系列目录一、注意力机制基础——RNN,Seq2Seq等基础知识二、注意力机制【Self-Attention,自注意力模型】三、Transformer图文详解【Attention is all you need】四、大语言模型的Scaling Law【Power Low】文章目录 NLP-大语言模型学习系列目录一、什么是…...

编程日记 2024/10/30 1:23:57

windows环境下，使用docker搭建redis集群

参考： https://blog.csdn.net/weixin_46594796/article/details/137864842 https://www.cnblogs.com/niceyoo/p/14118146.html 史上最详细Docker搭建Redis Cluster集群环境值得收藏每步都有图，不用担心学不会-腾讯云开发者社区-腾讯云一、基础环境描述宿主机：192.168…...

编程日记 2024/10/30 1:22:56

Python(pandas库3)

函数随机抽样语法： n：要抽取的行数 frac：抽取的比例，比如 frac0.5，代表抽取总体数据的50% axis：示在哪个方向上抽取数据(axis1 表示列/axis0 表示行) 案例： 输出结果都为随机抽取。空…...

编程日记 2024/10/30 1:19:54

WPF+MVVM案例实战（十）- 水波纹按钮实现与控件封装

文章目录 1、运行效果1、封装用户控件1、创建文件2、依赖属性实现2、使用封装的按钮控件1.主界面引用2.按钮属性设置3 总结1、运行效果 1、封装用户控件 1、创建文件打开 Wpf_Examples 项目，在 UserControlLib 用户控件库中创建按钮文件 WaterRipplesButton.xaml ，修改 Us…...

编程日记 2024/10/30 1:16:51

数据结构————map,set详解

今天带来map和set的详解，保证大家分清楚一，概念 map和set是一种专门用来搜索的容器或数据结构 map能存储两个数据类型，我们称之为<key-value>模型 set只能存储一个数据类型，我们称之为纯<key>模型它们的效率都非…...

编程日记 2024/10/30 1:15:50

fdisk - Linux下的磁盘分区利器

文章目录前言一、安装和启动二、基本命令2.1 查看分区表2.2 删除分区2.3 创建新分区2.4 更改分区类型2.5 其他指令三、注意事项四、其他相关工具前言在Linux系统中，磁盘管理是维护系统性能和数据安全的重要环节。fdisk 是一个强大的命令行工具，专门…...

编程日记 2024/10/30 1:14:50

or-tools优化库记录

介绍 Or-tools是谷歌人工智能系列的运筹优化包，是一个用于优化的开源软件套件，针对性地解决车辆路线问题、流程优化、整数和线性规划以及约束规划等问题。官网地使用说明比我详细，我就不多逼逼了使用说明网址： https://develo…...

编程日记 2024/10/30 1:13:47

M1 Pro MacBook Pro 上的奇遇：Rust 构建失败，SIGKILL 惊魂记

你是否也曾在 M1 Pro MacBook Pro 上遇到过离奇的编译问题？这次我遇到的奇葩问题绝对值得一聊——一个仅在苹果M1 Pro上的神秘构建失败。其他设备都安然无恙，唯独它！折腾了一番，终于让我揭开了这“阴谋”的真相。问题描述在运…...

编程日记 2024/10/30 1:12:46

重构商业生态：DApp创新玩法与盈利模式的深度剖析

随着区块链技术的发展，DApp（去中心化应用）正在从实验走向成熟。DApp以去中心化、透明性和不可篡改性为基础，结合智能合约，逐步改变传统商业运作模式，创造新的市场生态。本文将从DApp的独特优势、创新玩法和…...

编程日记 2024/10/30 1:09:42

2024首届亚洲国际电影节圆满落下帷幕

10月26日下午，2024首届亚洲国际电影节颁奖典礼在中国•澳门隆重举行。在这座充满时尚感的“东亚文化之都”，一座座金鹮奖杯，汇聚起全球电影艺术的荣耀之光，见证着无数电影梦想的傲然绽放。明星云集欢聚一堂，同庆澳门回…...

编程日记 2024/10/30 1:08:42

【Mybatis】动态SQL+配置文件+数据库连接池+企业规范（10）

本系列共涉及4个框架：Sping,SpringBoot,Spring MVC,Mybatis。博客涉及框架的重要知识点，根据序号学习即可。目录本系列共涉及4个框架：Sping,SpringBoot,Spring MVC,Mybatis。博客涉及框架的重要知识点，根据序号学习即可。 …...

编程日记 2024/10/30 1:07:41

源码：rightmenu.js layui.define([element], function (exports) {let element layui.element;const $ layui.jquery;let MOD_NAME rightmenu;let RIGHTMENUMOD function () {this.v 1.0.0;this.author raowenjing;};String.prototype.format function () {…...

编程日记 2024/10/30 1:06:40

ue5实现数字滚动增长

方法1 https://www.bilibili.com/video/BV1h14y197D1/?spm_id_from333.999.0.0 b站教程重写loop节点方法二写在eventtick里...

编程日记 2024/10/30 1:05:39

Flink（一）

目录架构处理有界与无界数据部署应用到任意地方运行任意规模应用利用内存性能流应用流处理应用的基本组件流状态时间应用场景事件驱动应用事件驱动应用的优势Flink如何支持事件驱动应用？ 典型的事件驱动示例数据分析应用流式分析应用的优势？Flink 如…...

编程日记 2024/10/30 1:04:37

kaggle 数据集下载

文章目录 kaggle 数据集下载（1） 数据集下载（2） 手机号验证 kaggle 数据集下载这两天想学习 kaggle 赛事把深度学习相关的内容自己给过一遍，快忘得差不多了，惭愧。参考了好多帖子，使用命令行…...

编程日记 2024/10/30 1:03:36

Linux shell编程学习笔记87：blkid命令——获取块设备信息

0 引言在进行系统安全检测时，我们需要收集块设备的信息，这些可以通过blkid命令来获取。 1 blkid命令的安装 blkid命令是基于libblkid库的命令行工具，可以在大多数Linux发行版中使用。如果你的Linux系统中没有安装blkid命令，…...

编程日记 2024/10/30 1:00:33

wireshark筛选条件整理

Wireshark筛选条件整理一、MAC地址过滤二、IP地址过滤三、端口过滤四、协议筛选五、数据分析1、整体2、frame数据帧分析3、 Ethernet II 以太网4、IP协议5、TCP6、HTTP7、ARP8、DLEP动态链接交换协议六、统计-协议分级（统计包占比） and && 、 …...

编程日记 2024/10/30 0:59:31

基于现代 C++17 的模块化视频质量诊断处理流程设计

文章目录 0. 引言1. 原始设计分析2. 新的设计思路2.1 定义通用的检测接口2.2 使用 std::function 和 std::any 管理检测模块2.3 构建可动态配置的检测管道 3. 示例实现3.1 定义检测接口和模块3.1.1 检测接口3.1.2 信号检测模块3.1.3 冻结检测模块3.1.4 其他检测模块 3.2 构建检…...

编程日记 2024/10/30 0:57:30

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...

编程新知 2025/7/5 21:20:33

【kafka】Golang实现分布式Masscan任务调度系统

要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。服务端程序： 从kafka消费者接收…...

编程新知 2025/7/5 22:57:52

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...

编程新知 2025/6/27 14:22:50

自然语言处理——循环神经网络

自然语言处理——循环神经网络循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM&#xff09…...

编程新知 2025/7/4 19:17:15

C++ Visual Studio 2017厂商给的源码没有.sln文件易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/7/4 15:02:32

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/7/3 17:19:47

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由：大部分的转换软件需要收费，要么功能不齐全，而开会员又用不了几次浪费钱，借用别人的又不安全。这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/6/28 13:23:48

沙箱虚拟化技术虚拟机容器之间的关系详解

问题沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西，但是如果把三者放在一起，它们之间到底什么关系？又有什么联系呢？我不是很明白！！！ 就比如说： 沙箱&#…...

编程新知 2025/6/30 0:16:39

【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据（33个指标）

旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据！该数据集源自2025年4月发表于《地理学报》的论文成果…...

编程新知 2025/7/6 0:01:37

基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究

摘要：在消费市场竞争日益激烈的当下，传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序，探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式，分析沉浸式体验的优势与价值…...

编程新知 2025/7/4 4:46:38

canvas基础+应用+实例

文章目录

Canvas基础知识要点

一、基本概念

二、常用参数

三、实例

四、场景应用说明

完结

相关文章：

canvas基础+应用+实例

Linux命令用户操作简介

大语言模型的Scaling Law【Power Low】

windows环境下，使用docker搭建redis集群

Python(pandas库3)

WPF+MVVM案例实战（十）- 水波纹按钮实现与控件封装

数据结构————map,set详解

fdisk - Linux下的磁盘分区利器

or-tools优化库记录

M1 Pro MacBook Pro 上的奇遇：Rust 构建失败，SIGKILL 惊魂记

重构商业生态：DApp创新玩法与盈利模式的深度剖析

2024首届亚洲国际电影节圆满落下帷幕

【Mybatis】动态SQL+配置文件+数据库连接池+企业规范（10）

layui扩展组件之----右键菜单

ue5实现数字滚动增长

Flink（一）

kaggle 数据集下载

Linux shell编程学习笔记87：blkid命令——获取块设备信息

wireshark筛选条件整理

基于现代 C++17 的模块化视频质量诊断处理流程设计

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

【kafka】Golang实现分布式Masscan任务调度系统

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

自然语言处理——循环神经网络

C++ Visual Studio 2017厂商给的源码没有.sln文件易兆微芯片下载工具加开机动画下载。

3-11单元格区域边界定位(End属性)学习笔记

【分享】推荐一些办公小工具

沙箱虚拟化技术虚拟机容器之间的关系详解

【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据（33个指标）

基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究