HTML ＜canvas＞标签

Posted 2022-12-10 牧云的少年

Canvas是html中的画布功能用来定义图标，比如图表和其他图像。其元素本身只是图形容器没有绘制功能（他仅仅是图形的容器）其必须要使用脚本绘制图形<canvas> 标签是 HTML 5 中的新标签。

注：IE 8 或更早的浏览器不支持<canvas>元素

创建和渲染路径

画布的一项强大功能是，它能够从基本的绘图操作来构建图形，然后，绘制这些图形的框架（勾勒它们）或者给这些图形的内容涂色（填充它们）。累计起来的操作统一叫做当前路径。一个画布只保持一条当前路径。

为了构建一个多条线段所构成的一个连续的封闭形状，绘制操作之间需要一个连接点。为此，画布保存了一个当前位置。画布绘制操作显式地使用这个位置作为它们的起始点，并且更新它直到到达终点。可以把这看做是使用钢笔或纸来绘画：当您完成了一条具体的线段或曲线，当前位置就是完成这一操作之后钢笔所停留的点。

可以在当前路径中创建一系列互相不连续的形状，它们都使用同样的绘制参数一起渲染。要分隔开这些形状，请使用 moveTo() 方法，这个方法把当前的位置移动到一个新的位置而不添加一条连接线段。当您这么做的时候，就创建了一条新的路径，这是用来表示一组连接起来的操作的画布术语。

一旦您所想要的路径形成了，可以使用 stroke() 绘制其边框，使用 fill() 来绘制其内容；或者两件事都做。

可用的图形操作有：用来绘制直线的 lineTo()，用于绘制矩形的 rect()，用于绘制部分圆形的 arc() 或 arcTo()，以及用于绘制曲线的 bezierCurveTo() 或 quadraticCurveTo()。

除了勾勒和填充，还可以使用当前路径来指定绘制时画布所使用的剪切区域。这个区域中的像素是显示的，区域之外的像素是不显示的。剪切区域是累加性的；调用 clip() 可以将当前路径和当前绘制区域取交集，产生一个新的区域。不幸的是，没有直接的方法把当前的剪切区域设置为画布的范围；要做到这一点，必须保存和恢复画布的整个图形状态。

如果任何子路径中的线段没有形成一个闭合的图形，fill() 和 clip() 操作通过添加一条从子路径的起点到终点的、虚拟（勾勒的时候看不到）线段来闭合它。可选的是，也可以调用 closePath() 来显示地添加这条线段。

颜色、渐变和模式

在填充和勾勒路径时，可用 fillStyle 和 strokeStyle 属性来指定线段或者绘制区域如何绘制。CSS 样式颜色字符串，以及描述渐变和模式的 CanvasGradient 或 CanvasPattern 都是可以接受的。要创建一个渐变，请使用 createLinearGradient() 或 createRadialGradient()。要创建一个模式，请使用 createPattern()。

要用 CSS 表示法来指定不透明的颜色，就采用 "#RRGGBB" 形式的字符串，其中 RR、GG 和 BB 分别是指定颜色的红色、绿色和蓝色成分的十六进制，其值都在 00 和 FF 之间。例如，完全红色的值是 "#FF0000"。要指定部分透明的颜色，请使用一个 "rgba(R,G,B,A)" 形式的字符串。在这种形式中，R、G 和 B 将颜色的红色、绿色和蓝色成分指定为 0 到 255 之间的十进制整数，并且 A 把 alpha（不透明）成分指定为 0.0 （完全透明）和 1.0 （完全不透明）之间的一个浮点数值。例如，半透明的完全红色为 "rgba(255,0,0,0.5)"。

线条宽度、线帽和线条连接

画布为调整各种线条显示提供了几个选项。可以使用 lineWidth 属性来指定线条的宽度，用 lineCap 属性来指定的端点如何绘制，并且用 lineJoin 属性来指定线条如何连接。

坐标空间和转换

默认情况下，一个画布的坐标空间使用画布的左上角 (0,0) 作为原点，x 值向右增加，y 值向下增加。这个坐标空间中的一个单位通常转换为像素。

然后，可以转换坐标空间，产生你在绘图操作中所指定的用来移动、缩放或旋转的任何坐标或范围。这通过 translate()、scale() 和 rotate() 方法来实现，它们会对画布的变换矩阵产生影响。由于坐标空间可以像这样转换，您传递给 lineTo() 这样方法的坐标可能无法用像素来度量。因此，Canvas API 使用浮点数而不是整数。

变换按照它们被指定的顺序相反的顺序来处理。例如，调用 scale() 之后，紧接着调用 translate()，这会首先变换坐标系统，然后再缩放。

组合

通常，图形是一个绘制于另一个的上面，新的图形使得在它之前绘制在其下方的图形变得模糊。这是一个画布中的默认行为。然而，您可以通过为 globalCompositeOperation 属性指定不同的值来执行很多有趣的操作，范围包括从 XOR 操作到增量或减暗图形区域。

阴影

Canvas API 包含了可以自动为您所绘制的任何图形添加下拉阴影的属性。然而，在编写本参考页时，Safari 是唯一实现了这一 API 的浏览器。阴影的颜色可用 shadowColor 属性来指定，并且可以通过 shadowOffsetX 和 shadowOffsetY 属性来改变。另外，应用到阴影边缘的羽化量也可以使用 shadowBlur 属性来设置。

保存图形状态

save() 和 restore() 方法允许你保存和恢复一个 CanvasRenderingContext2D 对象的状态。save() 把当前状态推入到栈中，而 restore() 从栈的顶端弹出最近保存的状态，并且根据这些存储的值来设置当前绘图状态。

CanvasRenderingContext2D 对象的所有属性（除了画布的属性是一个常量）都是保存的状态的一部分。变换矩阵和剪切区域也是这个状态的一部分，但是当前路径和当前点并不是。