HTML <canvas>标签

Posted 牧云的少年

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML <canvas>标签相关的知识,希望对你有一定的参考价值。

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

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

创建和渲染路径

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

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

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

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

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

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

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

颜色、渐变和模式

在填充和勾勒路径时,可用 fillStyle 和 strokeStyle 属性来指定线段或者绘制区域如何绘制。CSS 样式颜色字符串,以及描述渐变和模式的 CanvasGradientCanvasPattern 都是可以接受的。要创建一个渐变,请使用 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 对象的所有属性(除了画布的属性是一个常量)都是保存的状态的一部分。变换矩阵和剪切区域也是这个状态的一部分,但是当前路径和当前点并不是。

以上是关于HTML <canvas>标签的主要内容,如果未能解决你的问题,请参考以下文章

HTML5——Canvas 高级操作

Python3 tkinter基础 Canvas bind 鼠标左键点击时,在当前位置画椭圆形

<canvas>标签怎么覆盖在网页上

html2canvas.js插件截图空白问题

html2canvas.js插件截图空白问题

WebGL-入门