Canvas
标签<canvas></canvas> 属性id width height ，当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。在标签里设置宽度和高度图像不会变形
使用canvas
<canvas id="c1" width="150" height="150"></canvas>
//获取画布
let c2 = document.getElementById("c1");
//获取画笔
let ctx = c2.getContext("2d");
=================================
const canvas = document.createElement('canvas')
canvas.width = 600;
canvas.height = 400;
document.body.append(canvas);
const ctx = canvas.getContext('2d')
canvas API
moveTo()
将一个新的子路径的起始点移动到 (x，y) 坐标的方法。只是移动画笔到指定位置。
void ctx.moveTo(x, y); x：点的 x 轴。y：点的 y 轴。
lineTo()
使用直线连接子路径的终点到 x，y 坐标的方法（并不会真正地绘制）。
void ctx.lineTo(x, y); x：直线终点的 x 轴坐标。y：直线终点的 y 轴坐标。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath(); // 开始绘制
ctx.moveTo(30, 50); // 移动画笔到(30, 50)
ctx.lineTo(150, 100); // 绘制直线到 (150, 100)
ctx.stroke(); // 渲染
createLinearGradient()
方法会根据两个给定的坐标值所构成的线段创建一个线性渐变。
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
createLinearGradient() 方法需要指定四个参数，分别表示渐变线段的开始和结束点。
x0: 起点的 x 轴坐标。
y0: 起点的 y 轴坐标。
x1: 终点的 x 轴坐标。
y1: 终点的 y 轴坐标。
返回： 一个根据指定线路初始化的线性 CanvasGradient 对象。
CanvasGradient.addColorStop() 方法添加一个由偏移值和颜色值指定的断点到渐变。如果偏移值不在0到1之间，将抛出INDEX_SIZE_ERR错误，如果颜色值不能被解析为有效的 CSS 颜色值 ，将抛出SYNTAX_ERR错误。
const gradient = ctx.createLinearGradient(20,0,220,0);
//0到1之间的值，超出范围将抛出INDEX_SIZE_ERR错误
gradient.addColorStop(0,'green')
gradient.addColorStop(0.5,'cyan')
gradient.addColorStop(1,'green')
ctx.fillStyle = gradient;
ctx.fillRect(20,20,200,100)
createRadialGradient()
根据参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法返回 CanvasGradient。
CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
x0: 开始圆形的 x 轴坐标。
y0: 开始圆形的 y 轴坐标。
r0: 开始圆形的半径。
x1: 结束圆形的 x 轴坐标。
y1: 结束圆形的 y 轴坐标。
r1: 结束圆形的半径。
const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);
gradient.addColorStop(0, "pink");
gradient.addColorStop(0.9, "white");
gradient.addColorStop(1, "green");
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 160, 160);
createConicGradient()
锥形渐变
createConicGradient(startAngle, x, y)
startAngle：开始渐变的角度，以弧度为单位。角度从中心向右水平移动的线开始，然后顺时针方向进行。
x： 渐变中心的 x 轴坐标。
y： 梯度中心的 y 轴坐标。
const gradient = ctx.createConicGradient(0, 100, 100);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.25, "orange");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(0.75, "green");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 200);
createPattern()
使用指定的图像 (CanvasImageSource) 创建模式的方法。它通过 repetition 参数在指定的方向上重复元图像。此方法返回一个CanvasPattern对象。
CanvasPattern ctx.createPattern(image, repetition);
image: 作为重复图像源的 CanvasImageSource 对象。可以是下列之一：
HTMLImageElement (),
HTMLVideoElement (),
HTMLCanvasElement (),
CanvasRenderingContext2D,
ImageBitmap,
ImageData,
Blob.
repetition: DOMString，指定如何重复图像。允许的值有：
“repeat” (both directions),
“repeat-x” (horizontal only),
“repeat-y” (vertical only),
“no-repeat” (neither).
如果为空字符串 (‘’) 或 null (但不是 undefined)，repetition 将被当作"repeat"。
const img = new Image();
img.src = "canvas_createpattern.png";
img.onload = () => {
const pattern = ctx.createPattern(img, "repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 300, 300);
};
arc()
绘制圆弧路径的方法。圆弧路径的圆心在 (x, y) 位置，半径为 r，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
x: 圆弧中心（圆心）的 x 轴坐标。
y: 圆弧中心（圆心）的 y 轴坐标。
radius: 圆弧的半径。
startAngle:圆弧的起始点，x 轴方向开始计算，单位以弧度表示。
endAngle:圆弧的终点，单位以弧度表示。
anticlockwise 可选:可选的Boolean值，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
ellipse()
添加椭圆路径的方法。椭圆的圆心在（x,y）位置，半径分别是radiusX 和 radiusY，按照anticlockwise（默认顺时针）指定的方向，从 startAngle 开始绘制，到 endAngle 结束。
void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
x：椭圆圆心的 x 轴坐标。
y：椭圆圆心的 y 轴坐标。
radiusX：椭圆长轴的半径。
radiusY：椭圆短轴的半径。
rotation：椭圆的旋转角度，以弧度表示 (非角度度数)。
startAngle：将要绘制的起始点角度，从 x 轴测量，以弧度表示 (非角度度数)。
endAngle：椭圆将要绘制的结束点角度，以弧度表示 (非角度度数)。
anticlockwise 可选：Boolean 选项，如果为 true，逆时针方向绘制椭圆（逆时针），反之顺时针方向绘制。
ctx.beginPath();
ctx.ellipse(100, 100, 30, 100, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(0, 200);
ctx.lineTo(200, 0);
ctx.stroke();
fill()
根据当前的填充样式，填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。在调用fill方法时，路径会自动连接起点和终点
void ctx.fill();
void ctx.fill(fillRule);
void ctx.fill(path, fillRule);
fillRule：一种算法，决定点是在路径内还是在路径外。 允许的值：
nonzero：非零环绕规则，默认的规则。
evenodd：奇偶环绕规则。
path：需要填充的Path2D 路径。
quadraticCurveTo()
二次贝塞尔曲线路径的方法。它需要 2 个点。第一个点是控制点，第二个点是终点。起始点是当前路径最新的点，当创建二次贝赛尔曲线之前，可以使用 moveTo() 方法进行改变。
void ctx.quadraticCurveTo(cpx, cpy, x, y);
cpx：控制点的 x 轴坐标。
cpy：控制点的 y 轴坐标。
x：终点的 x 轴坐标。
y：终点的 y 轴坐标。
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 * Math.PI); // Start point
ctx.arc(50, 100, 5, 0, 2 * Math.PI); // End point
ctx.fill();
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 * Math.PI);
ctx.fill();
arcTo()
根据控制点和半径绘制圆弧路径，使用当前的描点 (前一个 moveTo 或 lineTo 等函数的止点)。根据当前描点与给定的控制点 1 连接的直线，和控制点 1 与控制点 2 连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径。
void ctx.arcTo(x1, y1, x2, y2, radius);
x1：第一个控制点的 x 轴坐标。
y1：第一个控制点的 y 轴坐标。
x2：第二个控制点的 x 轴坐标。
y2：第二个控制点的 y 轴坐标。
radius：圆弧的半径。
ctx.setLineDash([]);
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.arcTo(150, 100, 50, 20, 30);
ctx.stroke();
ctx.fillStyle = "blue";
// base point
ctx.fillRect(150, 20, 10, 10);
ctx.fillStyle = "red";
// control point one
ctx.fillRect(150, 100, 10, 10);
// control point two
ctx.fillRect(50, 20, 10, 10);
//
ctx.setLineDash([5, 5]);
ctx.moveTo(150, 20);
ctx.lineTo(150, 100);
ctx.lineTo(50, 20);
ctx.stroke();
ctx.beginPath();
ctx.arc(120, 38, 30, 0, 2 * Math.PI);
ctx.stroke();
drawImage()
提供了多种在画布（Canvas）上绘制图像的方式。
drawImage(image, dx, dy);
drawImage(image, dx, dy, dWidth, dHeight);
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
image：绘制到上下文的元素。允许任何的画布图像源，例如：HTMLImageElement、SVGImageElement (en-US)、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas 或 VideoFrame (en-US)。
sx 可选：要绘制到目标上下文中的，image 的矩形（裁剪）选择框的左上角 X 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。
sy 可选：需要绘制到目标上下文中的，image 的矩形（裁剪）选择框的左上角 Y 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。
sWidth 可选：需要绘制到目标上下文中的，image 的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的 sx 和 sy 开始，到 image 的右下角结束。可以使用 3 参数或 5 参数语法来省略这个参数。使用负值将翻转这个图像。
sHeight 可选：需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。使用负值将翻转这个图像。
dx：image 的左上角在目标画布上 X 轴坐标。
dy：image 的左上角在目标画布上 Y 轴坐标。
dWidth：image 在目标画布上绘制的宽度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 宽度不会缩放。注意，这个参数不包含在 3 参数语法中。
dHeight：image 在目标画布上绘制的高度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 高度不会缩放。注意，这个参数不包含在 3 参数语法中。
const ctx = canvas.getContext("2d");
const image = document.getElementById("source");
image.addEventListener("load", (e) => {
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
});
fillRect()
绘制填充矩形的方法。当前渲染上下文中的fillStyle 属性决定了对这个矩形对的填充样式。这个方法是直接在画布上绘制填充，并不修改当前路径，所以在这个方法后面调用 fill() 或者stroke()方法并不会对这个方法有什么影响。
void ctx.fillRect(x, y, width, height);
x：矩形起始点的 x 轴坐标。
y：矩形起始点的 y 轴坐标。
width：矩形的宽度。
height：矩形的高度。
strokeRect()
在 canvas 中，使用当前的绘画样式，描绘一个起点在 (x, y)、宽度为 w、高度为 h 的矩形的方法。此方法直接绘制到画布而不修改当前路径，因此任何后续fill() 或stroke()调用对它没有影响。
void ctx.strokeRect(x, y, width, height); 参数同上
fillText()
它在指定的坐标上绘制文本字符串，并使用当前的 fillStyle 对其进行填充。存在一个可选参数，其指定了渲染文本的最大宽度，用户代理将通过压缩文本或使用较小的字体大小来实现。此方法会直接绘制到画布上，而不会修改当前路径，因此任何后续的 fill() 或 stroke() 调用都不会对其产生影响。
fillText(text, x, y)
fillText(text, x, y, maxWidth) 左下角为初始坐标
text：要作为渲染上下文的文本字符串。使用当前的 font、textAlign、textBaseline 和 direction ：设置值对文本进行渲染。
x：开始绘制文本的点的 X 轴坐标，单位为像素。
y：开始绘制文本的基线的 Y 轴坐标，单位为像素。
maxWidth ：可选文本渲染后的最大像素宽度。如果未指定，则文本宽度没有限制。但是，如果提供了该值，用户代理将调整字距，选择水平方向更紧凑的字体（如果有这种字体或可以在不降低质量的情况下生成这种字体），或缩小字体大小，以便在指定宽度内容纳文本。
strokeText()
在给定的 (x, y) 位置绘制文本的方法。如果提供了表示最大值的第四个参数，文本将会缩放适应宽度。
void ctx.strokeText(text, x, y [, maxWidth]); 同上
measureText()
方法返回一个关于被测量文本TextMetrics 对象包含的信息（例如它的宽度）。
ctx.measureText(text);
text需要测量的String 。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
translate()
方法对当前网格添加平移变换的方法。
void ctx.translate(x, y);
translate() 方法，将 canvas 按原始 x 点的水平方向、原始的 y 点垂直方向进行平移变换
rotate()
变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。
void ctx.rotate(angle);
angle
顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。
旋转中心点一直是 canvas 的起始点。如果想改变中心点，我们可以通过 translate() 方法移动 canvas。
scale()
根据 x 水平方向和 y 垂直方向，为 canvas 单位添加缩放变换的方法。
void ctx.scale(x, y);
x,y：缩放因子。
transform()
使用矩阵多次叠加当前变换的方法，矩阵由方法的参数进行描述。你可以缩放、旋转、移动和倾斜上下文。
void ctx.transform(a, b, c, d, e, f);
a (m11)
水平缩放。
b (m12)
垂直倾斜。
c (m21)
水平倾斜。
d (m22)
垂直缩放。
e (dx)
水平移动。
f (dy)
垂直移动。
实例属性
lineWidth
设置线段的宽度
ctx.lineWidth = value; 描述线段宽度的数字。0、负数、 Infinity 和 NaN 会被忽略。
strokeStyle
画笔（绘制图形）颜色或者样式的属性。默认值是 #000 (black)。
ctx.strokeStyle = color;
ctx.strokeStyle = gradient;
ctx.strokeStyle = pattern;
color : DOMString 字符串，可以转换成 CSS 值。
gradient : CanvasGradient 对象（线性渐变或放射性渐变）。
pattern : CanvasPattern 对象（可重复的图片）。
ctx.strokeStyle = "blue";
ctx.strokeRect(10, 10, 100, 100);
lineCap
指定如何绘制每一条线段末端的属性。有 3 个可能的值，分别是：butt, round and square。默认值是 butt。
ctx.lineCap = “butt”; 方形
ctx.lineCap = “round”; 圆形
ctx.lineCap = “square”; 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
lineJoin
用来设置 2 个长度不为 0 的相连部分（线段、圆弧、曲线）如何连接在一起的属性（长度为 0 的变形部分，其指定的末端和控制点在同一位置，会被忽略）。
ctx.lineJoin = “bevel”; 在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。
ctx.lineJoin = “round”; 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。
ctx.lineJoin = “miter”; 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。
此属性有 3 个值： round, bevel and miter。默认值是 miter。注意：如果 2 个相连部分在同一方向，那么 lineJoin 不会产生任何效果，因为在那种情况下不会出现连接区域。
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();
shadowBlur
描述模糊效果程度的属性；它既不对应像素值也不受当前转换矩阵的影响。默认值是 0。
ctx.shadowBlur = level;
level：描述模糊效果程度的，float 类型的值。默认值是 0。负数、 Infinity 或者 NaN 都会被忽略。
shadowColor
描述阴影颜色的属性。
ctx.shadowColor = color;
color：可以转换成 CSS 值的DOMString 字符串。默认值是 fully-transparent black.
shadowOffsetX shaowOffsetY
描述阴影偏移距离的属性。
ctx.shadowOffsetX = offset;
ctx.shadowOffsetY = offset;
offset：阴影偏移距离的 float 类型的值。默认值是 0。 Infinity 或者NaN都会被忽略。
font
描述绘制文字时，当前字体样式的属性。使用和 CSS font 规范相同的字符串值。
ctx.font = value;
value：符合 CSS font 语法的DOMString 字符串。默认字体是 10px sans-serif。
3504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
