搜索到
408
篇与
的结果
-
线条绘制 （1）直线步骤：使用 moveTO 方法把画笔移动到直线起点使用 lineTo 方法把画笔移动到直线终点使用 stroke 方法让画笔绘制线条<!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') // 3. 绘制直线 // 3.1 起点 context.moveTo(100, 100) // 3.2 终点 context.lineTo(200, 220) // 3.3 调用画线的方法 context.stroke() </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') // 3. 绘制折线 // 3.1 起点 context.moveTo(100, 100) // 3.2 使用 lineTo 依次经过转折点 context.lineTo(200, 220) context.lineTo(300, 100) context.lineTo(400, 210) context.lineTo(500, 250) // 3.3 调用画线的方法 context.stroke() </script> </body> </html>（3）lineWidth 设置线条的宽度<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lineWidth设置线条的宽度</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') // 3. 画线 context.moveTo(100, 100) context.lineTo(200, 220) // 4.设置线条的宽度（粗细） context.lineWidth = 3 // 5.画线 context.stroke() context.lineTo(300, 100) // 注意：画完线之后如果有新的路径，要调用 stroke 方法才会绘制新的路径 context.stroke() </script> </body> </html>（4）strokeStyle 修改线条的颜色<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>strokeStyle修改线条的颜色</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') // 3. 画线 context.moveTo(100, 100) context.lineTo(200, 220) context.lineWidth = 3 // 4.修改线条的颜色 context.strokeStyle = '#add8e6' // 5.画线 context.stroke() context.lineTo(300, 100) // 注意：画完线之后如果有新的路径，要调用 stroke 方法才会绘制新的路径 context.stroke() </script> </body> </html>（5）线性渐变<!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') // 3. 线性渐变 // 创建 const gradient = context.createLinearGradient(0, 0, 500, 500) // 从什么颜色开始渐变 gradient.addColorStop(0, 'pink') // 中间 gradient.addColorStop(0.35, 'yellow') // 到什么颜色结束 gradient.addColorStop(1, 'green') // 画线 context.lineTo(0, 0) context.lineTo(300, 300) context.lineWidth = 3 // 将渐变作为线条的颜色 context.strokeStyle = gradient context.stroke() </script> </body> </html>（6）径向渐变<!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') // 3. 生成渐变对象 const gradient = context.createRadialGradient(100, 100, 0, 100, 100, 100) // 添加渐变的颜色 gradient.addColorStop(0, 'yellow') gradient.addColorStop(1, 'green') // 把渐变赋给画笔 context.fillStyle = gradient context.fillRect(0, 0, 200, 200) </script> </body> </html>（7）锥形渐变<!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') // 3. 生成渐变对象 /* 参数一：弧度 参数二：渐变中心的 x 轴坐标 参数三：渐变中心的 y 轴坐标 */ const gradient = context.createConicGradient(45 * (Math.PI / 180), 100, 100) // 添加渐变的颜色 gradient.addColorStop(0, 'pink') gradient.addColorStop(1, 'lightgreen') // 把渐变赋给画笔 context.fillStyle = gradient context.fillRect(0, 0, 200, 200) </script> </body> </html>（8）重复元图像<!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') // 3. 生成渐变对象 let img = new Image() img.src = './images/test.jpg' img.onload = function() { // 创建重复元图像对象 let p = context.createPattern(img, 'repeat') context.fillStyle = p context.fillRect(0, 0, 200, 200) } </script> </body> </html>（9）渐变的折线<!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') // 3. 绘制折线 context.lineWidth = 3 // 渐变 let gradient = context.createLinearGradient(100, 100, 500, 100) gradient.addColorStop(0, 'lightblue') gradient.addColorStop(0.25, 'lightgreen') gradient.addColorStop(0.5, 'hotpink') gradient.addColorStop(1, 'red') // 将渐变赋值给 context context.strokeStyle = gradient // 3.1 起点 context.moveTo(100, 100) // 3.2 使用 lineTo 依次经过转折点 context.lineTo(200, 220) context.lineTo(300, 100) context.lineTo(400, 210) context.lineTo(500, 100) // 3.3 调用画线的方法 context.stroke() </script> </body> </html>（10）线段转折点的样式<!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') // 3. 绘制折线 context.lineWidth = 8 // 渐变 let gradient = context.createLinearGradient(100, 100, 500, 100) gradient.addColorStop(0, 'lightblue') gradient.addColorStop(0.25, 'lightgreen') gradient.addColorStop(0.5, 'hotpink') gradient.addColorStop(1, 'red') // 将渐变赋值给 context context.strokeStyle = gradient // 修改线段起点、终点的样式 /* butt 默认值，线条末端呈正方形 round 圆角 square 线条末端呈方形 */ context.lineCap = 'round' // 修改线段转折点的样式 /* miter 默认值，通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域 round 圆角 bevel 在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角 */ context.lineJoin = 'round' // 3.1 起点 context.moveTo(100, 100) // 3.2 使用 lineTo 依次经过转折点 context.lineTo(200, 220) context.lineTo(300, 100) context.lineTo(400, 210) context.lineTo(500, 100) // 3.3 调用画线的方法 context.stroke() </script> </body> </html> -
基础使用 参考 b站 叩丁狼 Canvas 课程（1）通过 html 标签创建<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过html标签创建</title> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script> // 1. 获取 canvas 画布 const canvas = document.getElementById('canvas') // 2. 获取 context 对象（画笔） const context = canvas.getContext('2d') // 3. 画一个正方形 // fillRect(x, y, width, height) context.fillRect(50, 40, 200, 200) </script> </body> </html>（2）通过 js 创建<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过js创建</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') // 3. （同第一节）画一个正方形 context.fillRect(60, 60, 200, 200) </script> </body> </html>（3）canvas 宽高的设置<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas宽高的设置</title> <!-- <style> canvas { width: 500px; height: 500px } </style> --> </head> <body> <script> // 注意：不建议使用 CSS 样式表设置 canvas 的宽高，样式会出问题 // 1. 创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2. 获取 context 对象（画笔） const context = canvas.getContext('2d') // 3. （同第一节）画一个正方形 context.fillRect(60, 60, 200, 200) </script> </body> </html>
-
数据持久化 为容器挂载主机目录# scr 主机目录 # dst 容器中的目录 ctr container create docker.io/library/busybox:latest busybox-test --mount type=bind,src=/home/workspace/busybox-mount-test,dst=/home,options=rbind:rw运行容器ctr tasks start -d busybox-test bash向挂载目录中添加文件touch /home/workspace/busybox-mount-test/test.txt进入容器查看ctr tasks exec --exec-id $RANDOM -t busybox-test bash
-
NameSpace 管理 containerd 使用 namespace 隔离容器运行时1. ctr namespace helproot@suaxi:~# ctr namespace -h NAME: ctr namespaces - Manage namespaces USAGE: ctr namespaces command [command options] [arguments...] COMMANDS: create, c Create a new namespace list, ls List namespaces remove, rm Remove one or more namespaces label Set and clear labels for a namespace OPTIONS: --help, -h show help2. 查看 namespacectr namespace ls NAME LABELS moby k8s.io3. 创建ctr namespace create test # 再次查看 ctr namespace ls NAME LABELS moby k8s.io test4. 删除ctr namespace rm test # 再次查看 ctr namespace ls NAME LABELS moby k8s.io5. 补充（1）查看指定 namespace 运行的用户进程ctr -n test tasks ls（2）在指定 namespace 中拉取镜像ctr -n test images pull docker.io/library/nginx:latest（3）在指定 namespace 中创建静态容器ctr -n test container create docker.io/library/nginx:latest nginx-test（4）查看在指定 namespace 中创建的容器ctr -n test container ls CONTAINER IMAGE RUNTIME nginx-test docker.io/library/nginx:latest io.containerd.runc.v2
-
容器管理 1. ctr container helproot@suaxi:~# ctr container help NAME: ctr containers - Manage containers USAGE: ctr containers [global options] command [command options] [arguments...] VERSION: 1.7.27 COMMANDS: create Create container delete, del, remove, rm Delete one or more existing containers info Get info about a container list, ls List containers label Set and clear labels for a container checkpoint Checkpoint a container restore Restore a container from checkpoint GLOBAL OPTIONS: --help, -h show help 2. 查看容器ctr container ls查看容器中正在跑着的进程ctr task ls # 简写 ctr t ls3. 创建静态容器# 同上，c 为 container 的简写 ctr c create docker.io/library/nginx:alpine nginx-test # 查看已创建的容器 ctr container ls CONTAINER IMAGE RUNTIME nginx-test docker.io/library/nginx:alpine io.containerd.runc.v2 # 查看容器信息 ctr container info nginx-test4. 启动容器# 启动task，即表时在容器中运行了进程（动态容器） ctr task start -d nginx-test5. 进入容器# --exec-id 表示为 exec 进程设置一个id（可以使用随机数，保证该id唯一即可） ctr task exec --exec-id 1 nginx-test /bin/sh6. 直接运行动态容器# --net-host 网络模式为 host ctr run -d --net-host docker.io/library/nginx:alpine nginx-test7. 暂停容器# 查看容器状态 ctr tasks ls TASK PID STATUS nginx-test 5687 RUNNING # 暂停 ctr tasks pause nginx-test # 再次查看状态 ctr tasks ls TASK PID STATUS nginx-test 5687 PAUSED8. 恢复容器ctr tasks resume nginx-test # 查看容器状态 ctr tasks ls TASK PID STATUS nginx-test 5687 RUNNING9. 停止容器# 使用 kill 命令，在 ctr task -h 帮助文档中可查看详细信息 ctr tasks kill nginx-test # 查看容器状态 ctr tasks ls TASK PID STATUS nginx-test 5687 STOPPED10. 删除容器# 停止/删除 task ctr tasks delete nginx-test # 删除容器（需先完成上述步骤） ctr container delete nginx-test
-
镜像管理 containerd 使用 ctr 命令，即：containerd CLI1. ctr images helproot@suaxi:~# ctr images -h NAME: ctr images - Manage images USAGE: ctr images command [command options] [arguments...] COMMANDS: check Check existing images to ensure all content is available locally export Export images import Import images list, ls List images known to containerd mount Mount an image to a target path unmount Unmount the image from the target pull Pull an image from a remote push Push an image to a remote prune Remove unused images delete, del, remove, rm Remove one or more images by reference tag Tag an image label Set and clear labels for an image convert Convert an image usage Display usage of snapshots for a given image ref OPTIONS: --help, -h show help 2. 查看镜像ctr images ls3. 拉取镜像containerd 支持 oci 标准的镜像，所以可以直接使用 docker 官方或 dockerfile 构建的镜像。# 拉取时镜像名需要写全量名称（源 + 镜像名:TAG） ctr images pull --all-platforms docker.io/library/nginx:alpine # 拉取指定平台的镜像（x86） ctr images pull --platform linux/amd64 docker.io/library/nginx:alpine4. 删除镜像ctr image rm docker.io/library/nginx:alpine5. 导出镜像ctr i export --all-platforms nginx.img docker.io/library/nginx:alpine6. 导入镜像# 以上一步导出的 nginx.img 镜像为例 ctr images import nginx.img unpacking docker.io/library/nginx:alpine7. 修改镜像 tag# 将 docker.io/library/nginx:alpine 修改为 nginx:alpine-test ctr images tag docker.io/library/nginx:alpine nginx:alpine-test修改后检查镜像ctr images check
-
简介、安装 一、简介1. 前言早在2016年3月，Docker 1.11 的 Docker Engine 里就包含了 containerd，而现在则是把 containerd 从 Docker Engine 里彻底剥离出来，作为一个独立的开源项目发展，目标是提供一个更加开放、稳定的容器运行基础设施。和原先包含在 Docker Engine 里 containerd 相比，独立的 containerd 将具有更多的功能，可以涵盖整个容器运行时管理的所有需求。containerd 并不直接面向用户，而是主要用于集成到更上层的系统里，比如 Swarm, Kubernetes , Mesos 等容器编排系统。containerd 以 Daemon 的形式运行在系统上，通过暴露底层的 gRPC API，上层系统可以通过这些API管理对应的容器。每个 containerd 只负责一台机器，Pull 镜像，对容器的启动、停止等操作，网络，存储都是由 containerd 完成。具体运行容器由 runC 负责，实际上只要是符合OCI规范的容器都可以支持。对于容器编排服务来说，运行时只需要使用 containerd + runC，更加轻量，容易管理。独立之后 containerd 的特性演进可以和 Docker Engine 分开，更加专注于专注容器运行时管理。2. 架构简要版二、安装以 Ubuntu 20.04 LTS 为例1. 安装依赖sudo apt update sudo apt install -y ca-certificates curl gnupg lsb-release2. 添加 Docker 官方 GPG 密钥sudo mkdir -p /etc/apt/keyrings curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg3. 添加仓库echo \ "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \ $(lsb_release -cs) stable" | \ sudo tee /etc/apt/sources.list.d/docker.list > /dev/null4. 安装sudo apt update sudo apt install -y containerd.io # 查看版本 containerd -V
-
Helm 参照 b站王晓春老师 helm 课程一、安装官网：https://helm.sh/此处以二进制包安装为例：# K8s 管理节点 wget https://github.com/helm/helm/releases/download/v3.18.3/helm-v3.18.3-linux-amd64.tar.gz.asc tar -zxvf helm-v3.18.3-linux-amd64.tar.gz.asc -C /usr/local/bin ln -s /usr/local/bin/linux-amd64/helm /usr/bin/helm # 查看版本信息 helm version二、常用命令1. 管理类Repository 管理add、list、remove、upgrade、index子命令等Chart 管理create、package、pull、push、dependency、search、show、verify等Release 管理instll、upgrade、get、list、history、status、rollback、uninstall等2. 常用命令示例# repo helm repo list # 列出已添加的仓库 helm repo add [REPO_NAME] [URL] # 添加远程仓库并指定名称 helm repo remove [ROPE_NAME] # 删除仓库 helm repo update # 更新仓库，类似于 apt update helm search hub [xxx] # 从 artifacthub 搜索，类似于 docker search helm search repo [xxx] # 从本地仓库搜索 helm show chart [CHART] # 查看 chart 包的信息 helm show values [CHART] # 查看 chart 包下 values.yaml 的文件内容 # 拉取 helm pull repo/chartname # 拉取最新版本的 chart.tgz 到当前目录下 helm pull chart_URL # 从 url 拉取 helm pull repo/app --version 1.0 --untar # 拉取指定版本并解压 # 安装 helm install [NAME] [CHART] [--version <string>] # 安装指定版本的 chart helm install [CHART] --generate-name # 安装时自动生成 RELEASE_NAME helm install --set key1=value1,key2=value2 [RELEASE_NAME] [CHART] # 动态设置参数 helm install -f values.yaml [RELEASE_NAME] [CHART] # 引用指定文件配置 helm install --debug --dry-run [RELEASE_NAME] [CHART] # 调试但不实际运行，输出调试的结果 # 删除 helm uninstall [RELEASE_NAME] # 删除 release # 查看 helm list # 列出已安装的 release helm status [RELEASE_NAME] # 查看 release 状态 helm get notes [RELEASE_NAME] # 查看 release 的说明 helm get values [RELEASE_NAME] -n [NAMESPACE] > values.yaml # 查看 release 生成的 values 并导出至指定文件 helm get mainfest [RELEASE_NAME] -n [NAMESPACE] # 查看 release 生成的资源清单文件 # 升级和回滚 helm upgrade [RELEASE_NAME] [CHART] --set key=value # 更新 release，同时动态设置参数 helm upgrade [RELEASE_NAME] [CHART] -f chartname/values.yaml # 同上 helm rollback [RELEASE_NAME] [REVISION] # 回滚至指定版本，不指定版本时默认回滚至上一个版本 helm history [RELEASE_NAME] # 查看历史记录 # 打包 helm package chartname/ # 将指定目录下的 chart 打包为 chartname.tgz 包至当前目录下3. 安装 chart 的六种方式By chart reference:helm install mysql xxx/mysqlBy path to a packaged chart:helm install mysql ./mysql-5.7.35.tgzBy path to an unpacked chart directory:helm install mysql ./mysqlBy absolute URL:helm install mysql https://xxx.com/charts /mysql-5.7.35.tgzBy chart reference and repo url:helm install --repo https://xxx .com/charts/mysql mysqlBy oci registries:helm install mysql --version 5.7.35 oci://xxx.com/charts /mysql
