Canvas入门教程！！超全绘制直线，圆形，矩形等方法属性【Canvas篇一】

如果没有天赋，那就一直重复。

canvas是什么？
使用场景：
canvas使用：
- 引入：
- 获取2D的上下文：
- 坐标轴：
绘制：
- beginPath() ：
- moveTo() :
- lineTo():
- stroke()：
- fillRect() ：
- strokeStyle 属性：
- fillStyle 属性：
画一条线：
画一个简单的矩形：
绘制一个圆形：
文本：
- fillText() 方法:
- strokeText() 方法:
- font 属性：
- textAlign 属性：
- textBaseline 属性：
- direction 属性：
添加图片：
- drawImage() 方法:
样式：
- fillStyle 属性：
- strokeStyle 属性：
路径形状：
- lineWidth 属性：
- lineCap 属性：
- lineJoin 属性：
- setLineDash() 方法：
ctx.save()：
ctx.restore()：

canvas是什么？

<canvas> 是 HTML5 中引入的一个元素，用于通过 JavaScript 绘制图形。它提供了一种在网页上动态生成图像、动画和图形的方法。<canvas> 本身只是一个容器，所有的绘图操作都需要通过 JavaScript 来实现。

使用场景：

动态图形和动画：用于创建游戏、动画和其他动态效果。
数据可视化：绘制图表、图形和其他数据可视化内容。
图像处理：可以对图像进行像素级的操作。
图形编辑器：开发在线绘图工具和图像编辑器。

canvas使用：

引入：

<canvas id="canvas"> 当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>

内部的内容是不支持canvas的浏览器会显示的内容…（我就不说是啥浏览器了hhh）

获取2D的上下文：

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext("2d");

或者根据以下代码进行判断浏览器的支持性：（对不支持的进行处理）

if (canvas.getContext) {// 正常逻辑
} else {// 不支持的兼容处理
}

坐标轴：

一般画布根据坐标轴进行判断我们在哪落笔。左上角为原点，向左向右延伸形成x，y轴。
在这里插入图片描述
上图在网上截取侵权联系删除。

绘制：

beginPath() ：

Canvas 2D API 的 CanvasRenderingContext2D.beginPath() 方法用于通过清空子路径列表开始一个新路径。当你想创建一个新的路径时，调用此方法。
beginPath() 方法在开始每条线之前调用，就是开始画的时候调用。

moveTo() :

Canvas 2D API 的 CanvasRenderingContext2D.moveTo() 方法用于在给定的 (x，y) 坐标处开始一个新的子路径。

moveTo(x, y)

从这个点开始画的意思。

lineTo():

Canvas 2D API 的 CanvasRenderingContext2D 接口的 lineTo() 方法将当前子路径的最后一个点与指定的 (x, y) 坐标用直线段相连，从而将一个直线段添加到当前子路径中。

lineTo(x, y)

在这个坐标结束绘画的意思。

stroke()：

Canvas 2D API 的 CanvasRenderingContext2D.stroke() 方法用于根据当前的描边样式，绘制当前或指定的路径。

stroke()
stroke(path)

让画的东西在画布上有个印子，让我们看到这个东西。

fillRect() ：

Canvas 2D API 的 CanvasRenderingContext2D.fillRect() 方法用于绘制一个矩形，并根据当前的 fillStyle 进行填充。
这个方法是直接在画布上绘制填充，并不修改当前路径，所以在这个方法后面调用 fill() 或者 stroke() 方法并不会对这个方法有什么影响。

fillRect(x, y, width, height)

strokeStyle 属性：

Canvas 2D API 的 CanvasRenderingContext2D.strokeStyle 属性指定用于形状描边（轮廓）的颜色、渐变或图案。默认值是 #000（黑色）。
设置绘制的颜色为蓝色：

ctx.strokeStyle = "blue";

fillStyle 属性：

Canvas 2D API 的 CanvasRenderingContext2D.fillStyle 属性指定用于形状内部的颜色、渐变或图案。默认样式为 #000（黑色）。

设置内部为蓝色：

ctx.fillStyle = "blue";

画一条线：

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas Line</title>
</head>
<body><canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas><script>let canvas = document.getElementById('myCanvas');let context = canvas.getContext('2d');// 绘制一条线context.beginPath();context.moveTo(0, 0); // 起点context.lineTo(200, 200); // 终点context.strokeStyle = 'green';context.stroke();</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>Canvas Example</title>
</head>
<body><canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas><script>let canvas = document.getElementById('myCanvas');let context = canvas.getContext('2d');// 绘制一个填充的矩形context.fillStyle = 'red';context.fillRect(50, 50, 100, 100);</script>
</body>
</html>

带fill()就是让他变成实心的。。。
在这里插入图片描述

绘制一个圆形：

这里使用的是弧度值。弧度值转角度值： π / 180度 * 角度
示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas Circle</title>
</head><body><canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas><script>let canvas = document.getElementById('myCanvas');let context = canvas.getContext('2d');// 绘制一个圆形context.beginPath();context.arc(100, 100, 50, 0, 2 * Math.PI); // 圆心(100, 100)，半径50context.fillStyle = 'blue';context.fill();</script>
</body></html>

在这里插入图片描述

文本：

text 是文字内容。x，y是文字的起点。maxWidth设置文本的最大宽度，如果超过这个宽度文字会被压缩。

ctx.fillText(text,x,y[,maxWidth])
ctx.strokeText(text,x,y[,maxWidth])

fillText() 方法:

Canvas 2D API 的 CanvasRenderingContext2D 对象的方法 fillText() 用于在指定的坐标上绘制文本字符串，并使用当前的 fillStyle 对其进行填充。存在一个可选参数，其指定了渲染文本的最大宽度，用户代理将通过压缩文本或使用较小的字体大小来实现。

fillText(text, x, y)
fillText(text, x, y, maxWidth)

示例：

<!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><canvas id="myCanvas" width="200" height="200" style="background-color: red;"></canvas><script>let canvas = document.getElementById('myCanvas');let ctx = canvas.getContext('2d');ctx.font = "50px system-ui";ctx.fillText("谢谢你的阅读", 50, 100, 80)</script>
</body></html>

在这里插入图片描述

strokeText() 方法:

Canvas 2D API 的 CanvasRenderingContext2D 的 strokeText() 方法用于在指定的坐标处对文本字符串的字符进行描边（即绘制轮廓）。一个可选的参数允许指定渲染文本的最大宽度，用户代理可以通过压缩文本或使用较小的字体大小来实现这一目标。

strokeText(text, x, y)
strokeText(text, x, y, maxWidth)

示例：

<!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><canvas id="canvas" width="500" height="200"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");ctx.font = "50px serif";ctx.strokeText("你好啊", 50, 90);</script>
</body></html>

在这里插入图片描述

font 属性：

Canvas 2D API 的 CanvasRenderingContext2D.font 属性指定绘制文字所使用的当前字体样式。其实和css的font是一样的。

textAlign 属性：

我们可以通过 textAlign 来设置文本对齐。
可选择选项有：“left” “right” “center” “start” “end”

“left”：文本左对齐。
“right"：文本右对齐。
“center”：文本居中对齐。
“start”：文本对齐界线开始的地方（左对齐指本地从左向右，右对齐指本地从右向左）。
“end”：文本对齐界线结束的地方（左对齐指本地从左向右，右对齐指本地从右向左）。

默认值是 “start”。
示例：

<!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><canvas id="canvas" width="500" height="200"></canvas><script>const canvas = document.getElementById("canvas");canvas.width = 350;const ctx = canvas.getContext("2d");const x = canvas.width / 2;ctx.beginPath();ctx.moveTo(x, 0);ctx.lineTo(x, canvas.height);ctx.stroke();ctx.font = "30px serif";ctx.textAlign = "left";ctx.fillText("left-aligned", x, 40);ctx.textAlign = "center";ctx.fillText("center-aligned", x, 85);ctx.textAlign = "right";ctx.fillText("right-aligned", x, 130);</script>
</body></html>

在这里插入图片描述

textBaseline 属性：

Canvas 2D API 的 CanvasRenderingContext2D.textBaseline 属性用于描述绘制文本时使用的文本基线。设置基线对齐

“top”：文本基线在文本块的顶部。
“hanging”：文本基线是悬挂基线。（用于藏文和其他印度文字。）
“middle”：文本基线在文本块的中间。
“alphabetic”：文本基线是标准的字母基线。默认值。
“ideographic”：文字基线是表意字基线；如果字符本身超出了 alphabetic 基线，那么 ideograhpic 基线位置在字符本身的底部。（用于中文、日文和韩文。）
“bottom”：文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。

默认值是 “alphabetic”。
示例：

<!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><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");const baselines = ["top","hanging","middle","alphabetic","ideographic","bottom",];ctx.font = "36px serif";ctx.strokeStyle = "red";baselines.forEach((baseline, index) => {ctx.textBaseline = baseline;const y = 75 + index * 75;ctx.beginPath();ctx.moveTo(0, y + 0.5);ctx.lineTo(550, y + 0.5);ctx.stroke();ctx.fillText(`Abcdefghijklmnop (${baseline})`, 0, y);});</script>
</body></html>

在这里插入图片描述

direction 属性：

Canvas 2D API 的 CanvasRenderingContext2D.direction 属性用来在绘制文本时，描述当前文本方向。

“ltr”：文字方向为从左到右。
“rtl”：文字方向为从右到左。
“inherit”：文字方向从相应的元素或 Document 继承。

默认值为 “inherit”。
示例：

<!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><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");ctx.font = "48px serif";ctx.fillText("Hi!", 150, 50);ctx.direction = "rtl";ctx.fillText("Hi!", 150, 130);</script>
</body></html>

在这里插入图片描述

添加图片：

const img = new Image()
img.src = 'https://img95.699pic.com/element/40181/5073.png_300.png'

drawImage() 方法:

Canvas 2D API 的 CanvasRenderingContext2D.drawImage() 方法提供了多种在画布（Canvas）上绘制图像的方式。

drawImage(image, dx, dy)
drawImage(image, dx, dy, dWidth, dHeight)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)// 只展示一部分

在这里插入图片描述
如果图片太大一下子加载不出来的话，我们可以使用img标签的onload这个监听方法绘制我们的drawImage的内容。

const img = new Image()
img.onload = function () {ctx.drawImage(img, 0, 0)
}
img.src = 'https://img95.699pic.com/element/40181/5073.png_300.png'

样式：

fillStyle 属性：

Canvas 2D API 的 CanvasRenderingContext2D.fillStyle 属性指定用于形状内部的颜色、渐变或图案。默认样式为 #000（黑色）。

表达方式：

ctx.fillStyle = "orange"
ctx.fillStyle = "#FFA500"
ctx.fillStyle = "rgb(255,265,0)"
ctx.fillStyle = "rgba(255,165,0,0.5)"

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>fillStyle 属性</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");ctx.fillStyle = "blue";ctx.fillRect(10, 10, 100, 100);</script>
</body></html>

在这里插入图片描述

strokeStyle 属性：

Canvas 2D API 的 CanvasRenderingContext2D.strokeStyle 属性指定用于形状描边（轮廓）的颜色、渐变或图案。默认值是 #000（黑色）

值：

color：解析为 CSS 值的字符串。
gradient：CanvasGradient 对象（线性或径向渐变）。
pattern：CanvasPattern 对象（重复图像）。

示例1：

<!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><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");ctx.strokeStyle = "blue";ctx.strokeRect(10, 10, 100, 100);</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>strokeStyle 属性</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");for (let i = 0; i < 6; i++) {for (let j = 0; j < 6; j++) {ctx.strokeStyle = `rgb(0${Math.floor(255 - 42.5 * i)}${Math.floor(255 - 42.5 * j)})`;ctx.beginPath();ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);ctx.stroke();}}</script>
</body></html>

在这里插入图片描述

路径形状：

lineWidth 属性：

Canvas 2D API 的 CanvasRenderingContext2D.lineWidth 属性用于设置线宽。值是一个数字，指定线条的宽度（以坐标空间单位表示）。零、负数、Infinity 和 NaN 值将被忽略。默认值为 1.0。
示例：

<!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><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");ctx.lineWidth = 15;ctx.beginPath();ctx.moveTo(20, 20);ctx.lineTo(130, 130);ctx.rect(40, 40, 70, 70);ctx.stroke();</script>
</body></html>

## 标题

lineCap 属性：

Canvas 2D API 的 CanvasRenderingContext2D.lineCap 属性用于指定如何绘制每一条线段的末端。
值：

“butt”：线条末端呈正方形。这是默认值。
“round”：线条末端呈圆形的。
“square”：线条末端呈方形，通过添加一个宽度与线条粗细相同且高度粗细的一半的盒子来形成。
示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>lineCap 属性</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");ctx.beginPath();ctx.moveTo(20, 20);ctx.lineWidth = 15;ctx.lineCap = "round";ctx.lineTo(100, 100);ctx.stroke();</script>
</body></html>

在这里插入图片描述

lineJoin 属性：

Canvas 2D API 的 CanvasRenderingContext2D.lineJoin 属性用于设置 2 个线段如何连接在一起。
此属性有 3 个值：“round”、“bevel” 和 “miter”。默认值是 “miter”。

“round”：通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。
“bevel”：在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。
“miter”：通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置受到 miterLimit 属性的影响。默认值。

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>lineJoin 属性</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");ctx.lineWidth = 20;ctx.lineJoin = "round";ctx.beginPath();ctx.moveTo(20, 20);ctx.lineTo(190, 100);ctx.lineTo(280, 20);ctx.lineTo(280, 150);ctx.stroke();</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>lineJoin 属性</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>const ctx = document.getElementById("canvas").getContext("2d");ctx.lineWidth = 10;["round", "bevel", "miter"].forEach((join, i) => {ctx.lineJoin = join;ctx.beginPath();ctx.moveTo(-5, 5 + i * 40);ctx.lineTo(35, 45 + i * 40);ctx.lineTo(75, 5 + i * 40);ctx.lineTo(115, 45 + i * 40);ctx.lineTo(155, 5 + i * 40);ctx.stroke();});</script>
</body></html>

在这里插入图片描述

setLineDash() 方法：

Canvas 2D API 的 CanvasRenderingContext2D 接口的 setLineDash() 方法用于在描线时使用虚线模式。

setLineDash(segments)

segments：一个数组，包含一组描述交替绘制线段和间隙（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组的元素会被复制和拼接。例如，[5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。如果数组为空，则虚线列表会被清空，线条描边将恢复为实线。

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>setLineDash 属性</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// 虚线ctx.beginPath();ctx.setLineDash([5, 15]);ctx.moveTo(0, 50);ctx.lineTo(300, 50);ctx.stroke();// 实线ctx.beginPath();ctx.setLineDash([]);ctx.moveTo(0, 100);ctx.lineTo(300, 100);ctx.stroke();</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>setLineDash 属性</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>function drawDashedLine(pattern) {ctx.beginPath();ctx.setLineDash(pattern);ctx.moveTo(0, y);ctx.lineTo(300, y);ctx.stroke();y += 20;}const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");let y = 15;drawDashedLine([]);drawDashedLine([1, 1]);drawDashedLine([10, 10]);drawDashedLine([20, 5]);drawDashedLine([15, 3, 3, 3]);drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);drawDashedLine([12, 3, 3]); // 等于 [12, 3, 3, 12, 3, 3]</script>
</body></html>

在这里插入图片描述

ctx.save()：

Canvas 2D API 的 CanvasRenderingContext2D.save() 方法用于通过将当前状态放入栈中，以保存 canvas 的完整状态。

存档（存上下文状态）（push）

ctx.restore()：

Canvas 2D API 的 CanvasRenderingContext2D.restore() 方法用于通过在绘制状态栈中弹出顶部的条目，将 canvas 恢复到最近的保存状态。如果没有保存状态，此方法不做任何改变。

恢复原来的状态不过每次restore都是最新的save的状态（pop）

示例使用 save() 方法保存当前状态，并使用 restore() 进行恢复。所以，稍后你可以使用当前状态绘制一个矩形：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>save & restore 属性</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// 保存当前状态ctx.save();ctx.fillStyle = "green";ctx.fillRect(10, 10, 100, 100);// 恢复到最近一次调用 save() 保存的状态ctx.restore();ctx.fillRect(150, 40, 100, 100);</script>
</body></html>