三、阈值与平滑处理 1. 图像阈值ret, dst = cv2.threshold(src, thresh, maxval, type)参数说明：src：输入图（只能输入单通道图像，一般为灰度图）dst：输出图thresh：阈值maxval：当像素值大于/小于阈值（根据type决定大于/小于），所赋予的值type：二值化的操作类型，包含以下5种：cv2.THRESH_BINARY：超过阈值部分取maxval，否则取0cv2.THRESH_BINARY_INV：THRESH_BINARY取反cv2.THRESH_TRUNC：大于阈值的像素值设为阈值，其他的不变cv2.THRESH_TOZERO：大于阈值的像素值不变，其他的设为0cv2.THRESH_TOZERO_INV：THRESH_TOZERO取反import cv2 # OpenCV 读取的格式是 BGR import matplotlib.pyplot as plt import numpy as np %matplotlib inline img = cv2.imread('ble.jpg') img_gray = cv2.imread('ble.jpg', cv2.IMREAD_GRAYSCALE) ret, thresh1 = cv2.threshold(img_gray, 127, 255, cv2.THRESH_BINARY) ret, thresh2 = cv2.threshold(img_gray, 127, 255, cv2.THRESH_BINARY_INV) ret, thresh3 = cv2.threshold(img_gray, 127, 255, cv2.THRESH_TRUNC) ret, thresh4 = cv2.threshold(img_gray, 127, 255, cv2.THRESH_TOZERO) ret, thresh5 = cv2.threshold(img_gray, 127, 255, cv2.THRESH_TOZERO_INV) titles = ['original', 'BINARY', 'BINARY_INV', 'TRUNC', 'TOZERO', 'TOZERO_INV'] images = [img, thresh1, thresh2, thresh3, thresh4, thresh5] for i in range(6): plt.subplot(2, 3, i + 1), plt.imshow(images[i], 'gray') plt.title(titles[i]) plt.xticks([]), plt.yticks([]) plt.show()2. 图像平滑img = cv2.imread('ysg.png') # cv2.imshow('img', img) # cv2.waitKey(0) # cv2.destroyAllWindows() plt.imshow(cv2.cvtColor(img, cv2.COLOR_BGR2RGB))<matplotlib.image.AxesImage at 0x2a857fb4d68># 均值滤波(平卷积操作) blur = cv2.blur(img, (5, 5)) # cv2.imshow('blur', blur) # cv2.waitKey(0) # cv2.destroyAllWindows() plt.imshow(cv2.cvtColor(blur, cv2.COLOR_BGR2RGB))<matplotlib.image.AxesImage at 0x2a8592e8c50># 方框滤波 # normalize=True 即选择归一化时和均值滤波一样 box_normalize_true = cv2.boxFilter(img, -1, (5, 5), normalize=True) # cv2.imshow('box_normalize_true', box_normalize_true) # cv2.waitKey(0) # cv2.destroyAllWindows() plt.imshow(cv2.cvtColor(box_normalize_true, cv2.COLOR_BGR2RGB))<matplotlib.image.AxesImage at 0x2a8592532b0># normalize=False 不做归一化，矩阵中的像素值相加，超过255取255 box_normalize_false = cv2.boxFilter(img, -1, (5, 5), normalize=False) # cv2.imshow('box_normalize_false', box_normalize_false) # cv2.waitKey(0) # cv2.destroyAllWindows() plt.imshow(cv2.cvtColor(box_normalize_false, cv2.COLOR_BGR2RGB))<matplotlib.image.AxesImage at 0x2a8579eed30># 高斯滤波 gaussian = cv2.GaussianBlur(img, (5, 5), 1) # cv2.imshow('gaussian', gaussian) # cv2.waitKey(0) # cv2.destroyAllWindows() plt.imshow(cv2.cvtColor(gaussian, cv2.COLOR_BGR2RGB))<matplotlib.image.AxesImage at 0x2a857a7b828># 中值滤波 median = cv2.medianBlur(img, 5) # cv2.imshow('median', median) # cv2.waitKey(0) # cv2.destroyAllWindows() plt.imshow(cv2.cvtColor(median, cv2.COLOR_BGR2RGB))<matplotlib.image.AxesImage at 0x2a8579d0588>

二、图像基本操作 1. 图像的读取与显示cv2.IMREAD_COLOR 彩色图像cv2.IMGREAD_GRAYSCALE 灰度图像import cv2 # OpenCV 读取的格式是 BGR import matplotlib.pyplot as plt import numpy as np %matplotlib inline img = cv2.imread('test.jpg') # 执行 img 回车可显示该图像的数据 array([[[189, 150, 188], [189, 150, 188], [188, 149, 187], ..., [189, 147, 188], [188, 146, 187], [189, 146, 189]], [[189, 150, 188], [188, 149, 187], [188, 149, 187], ..., [189, 147, 188], [188, 146, 187], [189, 146, 189]], [[188, 149, 187], [188, 149, 187], [188, 149, 187], ..., [189, 147, 188], [188, 146, 187], [189, 146, 189]], ..., [[189, 150, 188], [189, 150, 188], [189, 150, 188], ..., [189, 147, 188], [188, 146, 187], [189, 146, 189]], [[189, 150, 188], [189, 150, 188], [189, 150, 188], ..., [189, 147, 188], [188, 145, 188], [189, 146, 189]], [[189, 150, 188], [189, 150, 188], [189, 150, 188], ..., [189, 147, 188], [188, 145, 188], [189, 146, 189]]], dtype=uint8)# 图像的显示 cv2.imshow('image', img) # 等待时间，毫秒级0表示任意键终止 cv2.waitKey(0) cv2.destroyAllWindows()def cv_show(name, img): cv2.imshow(name, img) cv2.waitKey(0) cv2.destroyAllWindows()# 执行 img.shape 可输出该图像的 shape 数据 img.shape (295, 300, 3)# 读取灰度图 img = cv2.imread('test.jpg', cv2.IMREAD_GRAYSCALE) img array([[166, 166, 165, ..., 164, 163, 164], [166, 165, 165, ..., 164, 163, 164], [165, 165, 165, ..., 164, 163, 164], ..., [166, 166, 166, ..., 164, 163, 164], [166, 166, 166, ..., 164, 163, 164], [166, 166, 166, ..., 164, 163, 164]], dtype=uint8)# 图像的显示（灰度图） cv2.imshow('image', img) # 等待时间，毫秒级0表示任意键终止 cv2.waitKey(0) cv2.destroyAllWindows()# 保存 cv2.imwrite('test1.jpg', img)type(img) numpy.ndarray2. 读取视频cv2.VideoCapture 可以捕获摄像头，用数字来控制不同的设备，如：0,1如果是视频文件，可以直接指定路径vc = cv2.VideoCapture('jswyn.mp4') if vc.isOpened(): open, frame = vc.read() else: open = False while open: ret, frame = vc.read() if frame is None: break if ret == True: gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY) cv2.imshow('result', gray) if cv2.waitKey(10) & 0xFF == 27: break vc.release() cv2.destroyAllWindows()3. 截取部分图像数据（ROI区域）img = cv2.imread('test.jpg') jiaozi = img[0:50, 0: 150] cv_show('jiaozi', jiaozi)4. 颜色通道提取b,g,r = cv2.split(img) r array([[188, 188, 187, ..., 188, 187, 189], [188, 187, 187, ..., 188, 187, 189], [187, 187, 187, ..., 188, 187, 189], ..., [188, 188, 188, ..., 188, 187, 189], [188, 188, 188, ..., 188, 188, 189], [188, 188, 188, ..., 188, 188, 189]], dtype=uint8) r.shape (295, 300)# 合并 img = cv2.merge((b,g,r)) img.shape (295, 300, 3)# 只保留 R 通道 cur_img = img.copy() cur_img[:,:,0] = 0 cur_img[:,:,1] = 0 cv_show('R', cur_img)# 只保留 G 通道 cur_img = img.copy() cur_img[:,:,0] = 0 cur_img[:,:,2] = 0 cv_show('G', cur_img)# 只保留 B 通道 cur_img = img.copy() cur_img[:,:,1] = 0 cur_img[:,:,2] = 0 cv_show('B', cur_img)5. 边界填充top_size,bottom_size,left_size,right_size = (50, 50, 50, 50) replicate = cv2.copyMakeBorder(img, top_size, bottom_size, left_size, right_size, borderType=cv2.BORDER_REPLICATE) reflect = cv2.copyMakeBorder(img, top_size, bottom_size, left_size, right_size, borderType=cv2.BORDER_REFLECT) reflect101 = cv2.copyMakeBorder(img, top_size, bottom_size, left_size, right_size, borderType=cv2.BORDER_REFLECT_101) wrap = cv2.copyMakeBorder(img, top_size, bottom_size, left_size, right_size, borderType=cv2.BORDER_WRAP) constant = cv2.copyMakeBorder(img, top_size, bottom_size, left_size, right_size, borderType=cv2.BORDER_CONSTANT, value=0)import matplotlib.pyplot as plt plt.subplot(231), plt.imshow(img, 'gray'), plt.title('ORIGINAL') # plt.subplot(231), plt.imshow(replicate, 'gray'), plt.title('REPLICATE') # plt.subplot(231), plt.imshow(reflect, 'gray'), plt.title('REFLECT') # plt.subplot(231), plt.imshow(reflect101, 'gray'), plt.title('REFLECT_101') # plt.subplot(231), plt.imshow(wrap, 'gray'), plt.title('WRAP') # plt.subplot(231), plt.imshow(constant, 'gray'), plt.title('CONSTANT') plt.show()BORDER_REPLICATE：复制法，复制最边缘像素BORDER_REFLECT：反射法，对感兴趣的图像中的像素在两边进行复制，如：dcba|abcde|edcBORDER_REFLECT_101：反射法，以最边缘像素为轴，对称复制，如：dcb|abcd|cbaBORDER_WRAP：外包装法，如：bcde|abcde|abcdBORDER_CONSTANT：常量法，常量数值进行填充6. 数值计算img_jz = cv2.imread('test.jpg') img_jz[:5,:,0] array([[189, 189, 188, ..., 189, 188, 189], [189, 188, 188, ..., 189, 188, 189], [188, 188, 188, ..., 189, 188, 189], [188, 188, 188, ..., 189, 188, 189], [188, 188, 188, ..., 189, 188, 189]], dtype=uint8)img_jz1 = img_jz + 10 img_jz1[:5,:,0] array([[199, 199, 198, ..., 199, 198, 199], [199, 198, 198, ..., 199, 198, 199], [198, 198, 198, ..., 199, 198, 199], [198, 198, 198, ..., 199, 198, 199], [198, 198, 198, ..., 199, 198, 199]], dtype=uint8)# 相加时如果像素点的数值超过边界 255，则会将该值与256进行 % 取余操作 (img_jz + img_jz1)[:5,:,0] array([[132, 132, 130, ..., 132, 130, 132], [132, 130, 130, ..., 132, 130, 132], [130, 130, 130, ..., 132, 130, 132], [130, 130, 130, ..., 132, 130, 132], [130, 130, 130, ..., 132, 130, 132]], dtype=uint8)# 通过cv2的add方法进行操作时，如果像素点的数值超过边界 255，则取255，否则取它自身 cv2.add(img_jz,img_jz1)[:5,:,0] array([[255, 255, 255, ..., 255, 255, 255], [255, 255, 255, ..., 255, 255, 255], [255, 255, 255, ..., 255, 255, 255], [255, 255, 255, ..., 255, 255, 255], [255, 255, 255, ..., 255, 255, 255]], dtype=uint8)7. 图像融合# 当两张图的大小不一致时，无法进行融合，先用cv2.resize()方法调整 img_ble = cv2.imread('ble.jpg') img_jz + img_ble array([[[139, 68, 57], [140, 69, 58], [137, 68, 59], ..., [139, 70, 55], [138, 69, 53], [139, 69, 55]], [[140, 69, 58], [139, 68, 57], [137, 68, 59], ..., [139, 70, 55], [138, 69, 53], [139, 69, 55]], [[139, 68, 57], [139, 68, 57], [136, 67, 58], ..., [139, 70, 55], [138, 69, 53], [139, 69, 55]], ..., [[144, 68, 56], [137, 65, 57], [137, 70, 61], ..., [138, 68, 55], [137, 67, 54], [138, 68, 55]], [[143, 67, 55], [136, 64, 56], [135, 68, 59], ..., [138, 68, 55], [137, 66, 55], [139, 69, 56]], [[142, 66, 54], [141, 68, 60], [132, 65, 56], ..., [139, 69, 56], [138, 67, 56], [139, 69, 56]]], dtype=uint8)# 参数说明：img1,比例,img2,比例,亮度级 res = cv2.addWeighted(img_jz, 0.1, img_ble, 0.6, 0) plt.imshow(res)<matplotlib.image.AxesImage at 0x24ad14c8860># 将目标值设置为，通过x,y比例进行调整 res = cv2.resize(img, (0, 0), fx=3, fy=2.5) plt.imshow(res)<matplotlib.image.AxesImage at 0x24ad4d2f4e0>

一、环境配置 参考 b 站人工智能算法工程师 up 主1. 安装Anaconda下载地址：https://www.anaconda.com/download安装后使用 Python3.6 虚拟环境及 opencv-python 3.4.1.15 版本# 注：以管理员身份运行 Anaconda Prompt conda create -p C:\ProgramData\anaconda3\envs\py36 python=3.6 conda activate C:\ProgramData\anaconda3\envs\py36 pip install opencv-python==3.4.1.15 # 验证 opncv cd /d C:\ProgramData\anaconda3\envs\py36 python ipmort cv2 cv2.__version__安装拓展pip install opencv-contrib-python==3.4.1.152. Notebook安装并切换 Python3.6 内核# 继续在刚刚的 Anaconda Prompt 命令行窗口中执行以下代码 pip install ipykernel python -m ipykernel install --user --name py36 --display-name "Python 3.6 (py36)"打开 Jupyter Notebook，通过 http://localhost:8888/tree 可以访问到网页版 Notebook新建一个python测试文件，在顶部的 kernel 选项卡中可找到切换内核选项，切换至刚刚安装的 3.6 版本

Typecho Redis缓存插件 这个插件一直断断续续的在写着，功能不多（刚好够用，代码的 java 味儿略重，狗头）github地址：https://github.com/suaxi/TypechoRedisCache已实现功能：首次访问时缓存文章的 cid、标题、分类、创建/修改时间、作者、内容（Redis 数据类型为 Hash）已缓存文章数量统计清除全部缓存清除指定文章缓存（通过文章 cid）禁用插件时清除所有缓存后续计划：优化 Redis 配置选项2025-10-18 更新：添加 服务端连接配置 优化2025-10-20 更新：添加可选密码配置（生产环境建议将 Redis 外网权限隔离，仅在内网使用）

动画 1. requestAnimationFrame<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>requestAnimationFrame</title> </head> <body> <script> // 1.创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2.获取 context 对象（画笔） const context = canvas.getContext('2d') context.fillStyle = 'skyblue' // 画一个方形，使之随时间左右移动 // 调用 requestAnimationFrame 函数，使函数循环执行 let x = 0 function loop() { context.clearRect(0, 0, canvas.width, canvas.height) context.fillRect(x, 100, 100, 100, 100) x += 1 requestAnimationFrame(loop) } requestAnimationFrame(loop) </script> </body> </html>2. 环绕动画 - 行星运动<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>环绕动画-行星运动</title> <style> canvas { background-color: #4d5053; /* color: #4d5053; */ } </style> </head> <body> <script> // 1.创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2.获取 context 对象（画笔） const context = canvas.getContext('2d') // 地球旋转的角度 let earthAngle = 0 // 月球旋转的角度 let moonAngle = 0 function loop() { context.save() context.clearRect(0, 0, canvas.width, canvas.height) // 太阳 context.beginPath() context.arc(250, 250, 60, 0, 2 * Math.PI) context.fillStyle = '#f1ce07' context.shadowColor = '#f1ce07' context.shadowBlur = 10 context.fill() context.closePath() // 地球 // 1. 将canvas的原点移至太阳的中心 context.beginPath() context.translate(250, 250) context.rotate(earthAngle * Math.PI / 180) // 2. 将canvas的原点移至地球的中心（使日-地-月的中心在一条水平线上） context.translate(170, 0) context.arc(0, 0, 15, 0, 2 * Math.PI) context.fillStyle = 'blue' context.shadowBlur = 0 context.fill() earthAngle += 0.3 context.closePath() // 月亮 context.beginPath() context.rotate(moonAngle * Math.PI / 180) context.arc(35, 0, 6, 0, 2 * Math.PI) context.fillStyle = 'white' context.shadowBlur = 0 context.fill() moonAngle += 1.3 context.closePath() context.restore() requestAnimationFrame(loop) } requestAnimationFrame(loop) </script> </body> </html>

变换 1. translate 位移<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>translate位移</title> <style> canvas { background-color: lightblue; display: block; margin: auto; } </style> </head> <body> <script> // 1.创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2.获取 context 对象（画笔） const context = canvas.getContext('2d') // 位移（基于原点的变换） context.translate(100, 100) context.fillRect(10, 10, 100, 100) </script> </body> </html>2. rotate 旋转<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>rotate旋转</title> <style> canvas { background-color: lightblue; } </style> </head> <body> <script> // 1.创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2.获取 context 对象（画笔） const context = canvas.getContext('2d') // 位移（基于原点的变换） context.translate(200, 200) context.rotate(45 * Math.PI / 180) context.fillRect(10, 10, 100, 100) </script> </body> </html>3. scale 缩放<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>缩放</title> <style> canvas { background-color: lightblue; } </style> </head> <body> <script> // 1.创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2.获取 context 对象（画笔） const context = canvas.getContext('2d') // 缩放 context.scale(1.1, 2) context.fillRect(10, 10, 100, 100) </script> </body> </html>4. transform<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transform</title> <style> canvas { background-color: lightblue; } </style> </head> <body> <script> // 1.创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2.获取 context 对象（画笔） const context = canvas.getContext('2d') /* transform(a, b, c, d, e, f) 该方法集位移、旋转、缩放为一体 a 水平缩放 b 垂直倾斜 c 水平倾斜 d 垂直缩放 e 水平移动 f 垂直移动 */ context.transform(1.1, 45 * Math.PI / 180, 30 * Math.PI / 180, 1.4, 100, 100) context.fillRect(10, 10, 100, 100) </script> </body> </html>

滤镜 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滤镜</title> </head> <body> <script> // 1.创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2.获取 context 对象（画笔） const context = canvas.getContext('2d') // 滤镜 // context.filter = 'none' // 默认值 // context.filter = 'blur(5px)' // 模糊 // context.filter = 'brightness(70%)' // 亮度 // context.filter = 'contrast(25%)' // 对比度 // context.filter = 'grayscale(60%)' // 灰度 // context.filter = 'hue-rotate(100deg)' // 色彩旋转 // context.filter = 'invert(60%)' // 透明度 // context.filter = 'opacity(60%)' // 反相 // context.filter = 'saturate(300%)' // 饱和度 context.filter = 'sepia(300%)' // 褐度 const img = new Image() img.src = './images/test.jpg' img.onload = function() { context.drawImage(img, 100, 100) } </script> </body> </html>

文字 （1）绘制文字<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绘制文字</title> </head> <body> <script> // 1.创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2.获取 context 对象（画笔） const context = canvas.getContext('2d') // 文字属性 context.font = '200 16px Arial' // fillText(content, x, y, [maxWidth]) // 注：x, y为文字的左下角初始坐标 context.fillText('孙笑川', 100, 100) // maxWidth 属性一般不使用 context.fillText('孙笑川', 100, 200, 30) // strokeText(content, x, y, [maxWidth]) context.strokeText('孙笑川', 100, 300) </script> </body> </html>（2）绘制渐变的文字<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绘制渐变的文字</title> </head> <body> <script> // 1.创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2.获取 context 对象（画笔） const context = canvas.getContext('2d') // 文字属性 context.font = 'italic 40px Arial' // 渐变 let gradient = context.createLinearGradient(0, 0, 500, 0) gradient.addColorStop(0, 'yellow') gradient.addColorStop(0.25, 'orange') gradient.addColorStop(0.5, 'skyblue') gradient.addColorStop(0.75, 'purple') gradient.addColorStop(1, 'red') context.fillStyle = gradient // fillText(content, x, y, [maxWidth]) // 注：x, y为文字的左下角初始坐标 context.fillText('孙笑川', 100, 100) // maxWidth 属性一般不使用 context.fillText('孙笑川', 100, 200, 30) context.strokeStyle = gradient // strokeText(content, x, y, [maxWidth]) context.strokeText('孙笑川', 100, 300) </script> </body> </html>（3）文字的横向对齐方式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字的横向对齐方式</title> </head> <body> <script> // 1.创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2.获取 context 对象（画笔） const context = canvas.getContext('2d') // 辅助中线 context.strokeStyle = 'black' context.moveTo(250, 0) context.lineTo(250, 500) context.stroke() // 文字属性 context.font = 'italic 24px Arial' // 方向控制 direction context.direction = 'ltr' // 默认为从左到右 // 对齐方式 textAlign // context.textAlign = 'left' // context.textAlign = 'right' // context.textAlign = 'center' // fillText(content, x, y, [maxWidth]) // 注：x, y为文字的左下角初始坐标 context.fillText('孙笑川', 250, 100) context.direction = 'rtl' // 默认为从左到右 // strokeText(content, x, y, [maxWidth]) context.strokeText('孙笑川', 250, 300) </script> </body> </html>（4）文字的纵向对齐方式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字的纵向对齐方式</title> </head> <body> <script> // 1.创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2.获取 context 对象（画笔） const context = canvas.getContext('2d') const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic'] context.font = '24px Arial' baselines.forEach((baseline, index) => { // 基线 context.textBaseline = baseline const y = 50 + index * 50 context.beginPath() context.moveTo(0, y + 0.5) context.lineTo(500, y + 0.5) context.stroke() context.fillText(`孙笑川（${baseline})`, 0, y) }) </script> </body> </html>