首页/ Javascript前端/ Canvas入门学习笔记系列之：Canvas绘制图形

Canvas入门学习笔记系列之：Canvas绘制图形

  • 原创
  • 作者：程序员三丰
  • 发布时间：2025-01-04 21:57
  • 标签： HTML Javascript Canvas
  • 浏览量：348
本文介绍如何绘制矩形，三角形，直线，圆弧和曲线，以及掌握绘制路径。

栅格

栅格将帮助我们理解在Canvas中绘制图形的位置坐标，以及移动缩放等相关数据计算的视感。请参考下图理解：

上图解析：

  • canvas元素默认被网格所覆盖，一个网格单元相当于canvas元素中的一像素。
  • 栅格的起点为左上角（坐标：0，0），所有的元素位置坐标都是相对于原点定位。

图形绘制原理

Canvas只支持两种形式的图形绘制：

  • 矩形
  • 路径：有一系列点连成的线段。

所有其他图形都是通过一条或多条路径组合而成的。

绘制矩形

canvas 提供了三种方法绘制矩形：

  • 绘制一个填充矩形，语法：fillRect(x, y, width, height)
  • 绘制一个矩形边框，语法：strokeRect(x, y, width, height)
  • 清除指定矩形区域，让清除部分完全透明，语法：clearRect(x, y, width, height)

语法解析：
上面三个方法中都包含了相同的参数。
x 与 y 指定了在 canvas 画布上所绘制的矩形的左上角（相对于原点）的坐标。
width 和 height 设置矩形的尺寸。

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Canvas绘制矩形</title>
  8.         <style>
  9.             body {
  10.                 height: 100vh;
  11.                 display: flex;
  12.                 justify-content: center;
  13.                 align-items: center;
  14.             }
  15.         </style>
  16.         <script>
  17.             function draw() {
  18.                 var canvas = document.getElementById('canvas');
  19.                 if (canvas.getContext) {
  20.                     const ctx = canvas.getContext('2d');
  22.                     // 1. 先绘制一个边长为 100px 的黑色正方形
  23.                     ctx.fillRect(25, 25, 100, 100);
  25.                     // 2. 从上一行代码绘制的正方形的中心开始擦除了一个 60*60px 的正方形
  26.                     ctx.clearRect(45, 45, 60, 60);
  28.                     // 3. 在清除区域内绘制一个 50*50 的正方形边框
  29.                     ctx.strokeRect(50, 50, 50, 50)
  31.                 } else {
  32.                     alert('您的浏览器不支持Canvas!');
  33.                 }
  34.             }
  35.         </script>
  36.     </head>
  38.     <body onload="draw();">
  39.         <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate;"></canvas>
  40.     </>
  42. </html>

运行效果：

绘制路径

绘制原理

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。具体绘制步骤如下：

  • 第一步：使用beginPath()方法新建路径。
    • 本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。
    • 而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。
  • 第二步：使用moveTo()指定路径起始位置。
  • 第三步：调用相关函数指定绘制路径。
  • 第四步：使用closePath()方法闭合路径。
    • 该步骤不是必须的。
    • 该方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。、
    • 注意：当调用 fill() 函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合。

示例：绘制一个三角形

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Canvas绘制三角形</title>
  8.         <style>
  9.             body {
  10.                 height: 100vh;
  11.                 display: flex;
  12.                 justify-content: center;
  13.                 align-items: center;
  14.             }
  15.         </style>
  16.         <script>
  17.             function draw() {
  18.                 var canvas = document.getElementById('canvas');
  19.                 if (canvas.getContext) {
  20.                     const ctx = canvas.getContext('2d');
  22.                     ctx.beginPath();
  23.                     ctx.moveTo(75, 50);
  24.                     ctx.lineTo(100, 75);
  25.                     ctx.lineTo(100, 25);
  26.                     ctx.fill();
  27.                     // 可自行脑补一下绘制过程
  29.                 } else {
  30.                     alert('您的浏览器不支持Canvas!');
  31.                 }
  32.             }
  33.         </script>
  34.     </head>
  36.     <body onload="draw();">
  37.         <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate;"></canvas>
  38.     </body>
  40. </html>

运行效果：

关键方法

moveTo(x, y) 移动笔触

该方法将笔触移动到指定的坐标 x 以及 y 上。

如果不理解，你可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。

当 canvas 初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径。

代码示例：画一个笑脸

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas绘制笑脸</title>
  8.     <style>
  9.         body {
  10.             height: 100vh;
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: center;
  14.         }
  15.     </style>
  16.     <script>
  17.         function draw() {
  18.             var canvas = document.getElementById('canvas');
  19.             if (canvas.getContext) {
  20.                 const ctx = canvas.getContext('2d');
  22.                 ctx.beginPath();
  24.                 // 画一个圆，代表脸的轮廓
  25.                 ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
  27.                 // 画口
  28.                 ctx.moveTo(110, 75);
  29.                 ctx.arc(75, 75, 35, 0, Math.PI, false);
  31.                 // 画左眼
  32.                 ctx.moveTo(65, 65)
  33.                 ctx.arc(60, 65, 5, 0, Math.PI * 2, true)
  35.                 // 画右眼
  36.                 ctx.moveTo(95, 65)
  37.                 ctx.arc(90, 65, 5, 0, Math.PI * 2, true)
  39.                 ctx.stroke();
  41.             } else {
  42.                 alert('您的浏览器不支持Canvas!');
  43.             }
  44.         }
  45.     </script>
  46. </head>
  48. <body onload="draw();">
  49.     <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate;"></canvas>
  50. </body>
  52. </html>

运行效果：

lineTo(x, y) 绘制直线

该方法绘制一条从当前位置到指定 x 以及 y 位置的直线。

该方法有两个参数：x 以及 y，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，以此类推。开始点也可以通过moveTo()函数改变。

代码示例：两个三角形

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas绘制三角形</title>
  8.     <style>
  9.         body {
  10.             height: 100vh;
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: center;
  14.         }
  15.     </style>
  16.     <script>
  17.         function draw() {
  18.             var canvas = document.getElementById('canvas');
  19.             if (canvas.getContext) {
  20.                 const ctx = canvas.getContext('2d');
  22.                 ctx.beginPath();
  24.                 // 填充三角形
  25.                 ctx.moveTo(25, 25);
  26.                 ctx.lineTo(105, 25);
  27.                 ctx.lineTo(25, 105);
  28.                 ctx.fill();
  30.                 // 描边三角形
  31.                 ctx.beginPath();
  32.                 ctx.moveTo(125, 125);
  33.                 ctx.lineTo(125, 45);
  34.                 ctx.lineTo(45, 125);
  35.                 ctx.closePath();
  36.                 ctx.stroke();
  38.             } else {
  39.                 alert('您的浏览器不支持Canvas!');
  40.             }
  41.         }
  42.     </script>
  43. </head>
  45. <body onload="draw();">
  46.     <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate;"></canvas>
  47. </body>
  49. </html>

运行效果：

arc(x, y, radius, startAngle, endAngle, anticlockwise) 绘制圆或圆弧

画一个以（x,y）为圆心的以 radius 为半径的圆弧（圆），从 startAngle 开始到 endAngle 结束，按照 anticlockwise 给定的方向（默认为顺时针）来生成。

该方法有6个参数：

  • x，y为绘制圆弧所在圆上的圆心坐标；
  • radius为半径；
  • startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以 x 轴为基准。
  • 参数anticlockwise为一个布尔值。为 true 时，是逆时针方向，否则顺时针方向。

代码示例：圆和圆弧综合示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas绘制圆和圆弧综合示例</title>
  8.     <style>
  9.         body {
  10.             height: 100vh;
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: center;
  14.         }
  15.     </style>
  16.     <script>
  17.         function draw() {
  18.             var canvas = document.getElementById('canvas');
  19.             if (canvas.getContext) {
  20.                 const ctx = canvas.getContext('2d');
  22.                 ctx.beginPath();
  24.                 for (let i = 0; i < 4; i++) {
  25.                     for (let j = 0; j < 3; j++) {
  26.                         ctx.beginPath();
  27.                         const x = 45 + j * 70; // x 坐标值
  28.                         const y = 45 + i * 70; // y 坐标值
  29.                         const radius = 20; // 圆弧半径
  30.                         const startAngle = 0; // 开始点
  31.                         const endAngle = Math.PI + (Math.PI * j) / 2; // 结束点
  32.                         const anticlockwise = i % 2 == 0 ? false : true; // 顺时针或逆时针
  34.                         ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
  36.                         if (i > 1) {
  37.                             ctx.fill();
  38.                         } else {
  39.                             ctx.stroke();
  40.                         }
  41.                     }
  42.                 }
  44.             } else {
  45.                 alert('您的浏览器不支持Canvas!');
  46.             }
  47.         }
  48.     </script>
  49. </head>
  51. <body onload="draw();">
  52.     <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate;"></canvas>
  53. </body>
  55. </html>

运行效果：

二次贝塞尔曲线及三次贝塞尔曲线

贝塞尔曲线是十分有用的路径类型。二次及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。
二者名称听起来很相似，具体区别请看下图：

二次贝塞尔曲线有一个开始点（蓝色）、一个结束点（蓝色）以及一个控制点（红色），
而三次贝塞尔曲线有两个控制点。

绘制方法：

  • quadraticCurveTo(cp1x, cp1y, x, y) 该方法用来绘制二次贝塞尔曲线，cp1x,cp1y 为一个控制点，x,y 为结束点。
  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 该方法用来绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

示例一：使用二次贝塞尔曲线绘制对话气泡

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas使用二次贝塞尔曲线绘制对话气泡</title>
  8.     <style>
  9.         body {
  10.             height: 100vh;
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: center;
  14.         }
  15.     </style>
  16.     <script>
  17.         function draw() {
  18.             var canvas = document.getElementById('canvas');
  19.             if (canvas.getContext) {
  20.                 const ctx = canvas.getContext('2d');
  22.                 ctx.beginPath();
  23.                 ctx.moveTo(75, 25);
  24.                 ctx.quadraticCurveTo(25, 25, 25, 62.5);
  25.                 ctx.quadraticCurveTo(25, 100, 50, 100);
  26.                 ctx.quadraticCurveTo(50, 120, 30, 125);
  27.                 ctx.quadraticCurveTo(60, 120, 65, 100);
  28.                 ctx.quadraticCurveTo(125, 100, 125, 62.5);
  29.                 ctx.quadraticCurveTo(125, 25, 75, 25);
  30.                 ctx.stroke();
  32.             } else {
  33.                 alert('您的浏览器不支持Canvas!');
  34.             }
  35.         }
  36.     </script>
  37. </head>
  39. <body onload="draw();">
  40.     <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate;"></canvas>
  41. </body>
  43. </html>

运行效果：

示例二：使用三次贝塞尔曲线绘制心形

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas使用三次贝塞尔曲线绘制心形</title>
  8.     <style>
  9.         body {
  10.             height: 100vh;
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: center;
  14.         }
  15.     </style>
  16.     <script>
  17.         function draw() {
  18.             var canvas = document.getElementById('canvas');
  19.             if (canvas.getContext) {
  20.                 const ctx = canvas.getContext('2d');
  22.                 ctx.beginPath();
  23.                 ctx.moveTo(75, 40);
  24.                 ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
  25.                 ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
  26.                 ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
  27.                 ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
  28.                 ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
  29.                 ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
  30.                 ctx.fill();
  32.             } else {
  33.                 alert('您的浏览器不支持Canvas!');
  34.             }
  35.         }
  36.     </script>
  37. </head>
  39. <body onload="draw();">
  40.     <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate;"></canvas>
  41. </body>
  43. </html>

运行效果：

rect(x, y, width, height) 绘制矩形路径

该方法将一个矩形路径增加到当前路径上。

该方法有4个参数：x,y 为左上角坐标，width 以及 height 为矩形的宽和高。
注意：当该方法执行的时候，moveTo() 方法自动设置坐标参数（0,0）。也就是说，当前笔触自动重置回默认坐标。

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas添加矩形路径</title>
  8.     <style>
  9.         body {
  10.             height: 100vh;
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: center;
  14.         }
  15.     </style>
  16.     <script>
  17.         function draw() {
  18.             var canvas = document.getElementById('canvas');
  19.             if (canvas.getContext) {
  20.                 const ctx = canvas.getContext('2d');
  22.                 ctx.beginPath();
  23.                 ctx.moveTo(75, 40);
  24.                 ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
  25.                 ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
  26.                 ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
  27.                 ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
  28.                 ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
  29.                 ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
  30.                 ctx.fill();
  32.                 // 将矩形添加到路径中
  33.                 ctx.beginPath();
  34.                 ctx.rect(150, 150, 100, 100);
  35.                 ctx.stroke();
  37.                 ctx.beginPath();
  38.                 ctx.rect(160, 160, 80, 80);
  39.                 ctx.fill();
  41.             } else {
  42.                 alert('您的浏览器不支持Canvas!');
  43.             }
  44.         }
  45.     </script>
  46. </head>
  48. <body onload="draw();">
  49.     <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate;"></canvas>
  50. </body>
  52. </html>

运行效果：

组合使用示例

现在阅读起来可能比较复杂，难点在于贝塞尔曲线的应用。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Canvas 组合使用</title>
  8.     <style>
  9.         body {
  10.             height: 100vh;
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: center;
  14.         }
  15.     </style>
  16.     <script>
  17.         function draw() {
  18.             var canvas = document.getElementById('canvas');
  19.             if (canvas.getContext) {
  20.                 const ctx = canvas.getContext('2d');
  22.                 drawRoundedRect(ctx, 12, 12, 250, 250, 15);
  23.                 drawRoundedRect(ctx, 19, 19, 236, 236, 9);
  24.                 drawRoundedRect(ctx, 53, 53, 49, 33, 10);
  25.                 drawRoundedRect(ctx, 53, 119, 49, 16, 6);
  26.                 drawRoundedRect(ctx, 135, 53, 49, 33, 12);
  27.                 drawRoundedRect(ctx, 135, 119, 65, 49, 10);
  29.                 ctx.beginPath();
  30.                 ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
  31.                 ctx.lineTo(32, 37);
  32.                 ctx.fill();
  34.                 for (var i = 0; i < 8; i++) {
  35.                     ctx.fillRect(44 + i * 16, 35, 4, 4);
  36.                 }
  38.                 for (i = 0; i < 6; i++) {
  39.                     ctx.fillRect(115, 51 + i * 16, 4, 4);
  40.                 }
  42.                 for (i = 0; i < 8; i++) {
  43.                     ctx.fillRect(51 + i * 16, 99, 4, 4);
  44.                 }
  46.                 ctx.beginPath();
  47.                 ctx.moveTo(83, 116);
  48.                 ctx.lineTo(83, 102);
  49.                 ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
  50.                 ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
  51.                 ctx.lineTo(111, 116);
  52.                 ctx.lineTo(106.333, 111.333);
  53.                 ctx.lineTo(101.666, 116);
  54.                 ctx.lineTo(97, 111.333);
  55.                 ctx.lineTo(92.333, 116);
  56.                 ctx.lineTo(87.666, 111.333);
  57.                 ctx.lineTo(83, 116);
  58.                 ctx.fill();
  60.                 ctx.fillStyle = "white";
  61.                 ctx.beginPath();
  62.                 ctx.moveTo(91, 96);
  63.                 ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
  64.                 ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
  65.                 ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
  66.                 ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
  67.                 ctx.moveTo(103, 96);
  68.                 ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
  69.                 ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
  70.                 ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
  71.                 ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
  72.                 ctx.fill();
  74.                 ctx.fillStyle = "black";
  75.                 ctx.beginPath();
  76.                 ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
  77.                 ctx.fill();
  79.                 ctx.beginPath();
  80.                 ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
  81.                 ctx.fill();
  83.             } else {
  84.                 alert('您的浏览器不支持Canvas!');
  85.             }
  86.         }
  88.         function drawRoundedRect(ctx, x, y, width, height, radius) {
  89.             ctx.beginPath();
  90.             ctx.moveTo(x, y + radius);
  91.             ctx.lineTo(x, y + height - radius);
  92.             ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
  93.             ctx.lineTo(x + width - radius, y + height);
  94.             ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
  95.             ctx.lineTo(x + width, y + radius);
  96.             ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
  97.             ctx.lineTo(x + radius, y);
  98.             ctx.quadraticCurveTo(x, y, x, y + radius);
  99.             ctx.stroke();
  100.         }
  101.     </script>
  102. </head>
  104. <body onload="draw();">
  105.     <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate"></canvas>
  106. </body>
  108. </html>

运行效果：

Path2D对象

为了简化代码和提高性能，Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速地回顾路径。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Canvas Path2D</title>
  8.     <style>
  9.         body {
  10.             height: 100vh;
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: center;
  14.         }
  15.     </style>
  16.     <script>
  17.         function draw() {
  18.             var canvas = document.getElementById('canvas');
  19.             if (canvas.getContext) {
  20.                 const ctx = canvas.getContext('2d');
  22.                 var rectangle = new Path2D();
  23.                 rectangle.rect(10, 10, 50, 50);
  25.                 var circle = new Path2D();
  26.                 circle.moveTo(125, 35);
  27.                 circle.arc(100, 35, 25, 0, 2 * Math.PI);
  29.                 ctx.stroke(rectangle);
  30.                 ctx.fill(circle);
  32.             } else {
  33.                 alert('您的浏览器不支持Canvas!');
  34.             }
  35.         }
  36.     </script>
  37. </head>
  39. <body onload="draw();">
  40.     <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate"></canvas>
  41. </body>
  43. </html>

运行效果：

声明：本文为原创文章，51blog.xyz和作者拥有版权，如需转载，请注明来源于51blog.xyz并保留原文链接：https://www.51blog.xyz/article/80.html

文章归档

PHP后端
Javascript前端
HTML/CSS
开发运维
资源分享
Go入门学习笔记

推荐文章

buildadmin logo
Thinkphp8 Vue3 Element PLus TypeScript Vite Pinia

🔥BuildAdmin是一个永久免费开源，无需授权即可商业使用，且使用了流行技术栈快速创建商业级后台管理系统。

热门标签

PHP ThinkPHP ThinkPHP5.1 Go Mysql Mysql5.7 Redis Linux CentOS7 Git HTML CSS CSS3 Javascript JQuery Vue LayUI VMware Uniapp 微信小程序 docker wiki Confluence7 学习笔记 uView ES6 Ant Design Pro of Vue React ThinkPHP6.0 chrome 扩展 翻译工具 Nuxt SSR 服务端渲染 scrollreveal.js ThinkPHP8.0 Mac webman 跨域CORS vscode GitHub ECharts Canvas

友情链接

Web技术分享 方法SEO顾问 静觅丨崔庆才的个人站点