HTML canvas标签

HTML canvas元素为HTML提供了一个可使用位图的表面。它用于在网页上绘制图形。

HTML 5标签用于使用JavaScript之类的脚本语言绘制图形。

的元素仅是图形的容器，必须使用脚本语言才能绘制图形。的元素允许对2D形状和位图图像进行动态且可编写脚本的渲染。

它是一种低级的过程模型，可更新位图且没有内置场景。canvas中有几种绘制路径，框，圆，文本和添加图像的方法。

如何创建HTML canvas?

canvas是HTML页面上类似矩形的区域。用canvas元素指定。默认情况下，元素没有边框，没有内容，就像一个容器。

HTML 5 Canvas标签示例

Your browser does not support the HTML5 canvas tag.

输出：

注意：始终需要指定id属性和height＆width属性来定义canvas的大小。一个HTML页面上可以有多个canvas元素。

支持的浏览器

Element	Chrome	IE	Firefox	Opera	Safari
	Yes	Yes	Yes	Yes	Yes

带有JavaScript的HTML canvas标签

canvas是二维网格。

坐标(0,0)定义canvas的左上角。参数(0,0,200,100)用于fillRect()方法。此参数将填充从左上角(0,0)开始的矩形，并绘制200 * 100矩形。

Your browser does not support the HTML5 canvas tag.

输出：

在canvas上画线

如果要在canvas上绘制直线，可以使用以下两种方法。

moveTo(x，y)：用于定义线的起点。

lineTo(x，y)：用于定义线的终点。

如果绘制起点为(0,0)且终点为(200,100)的线，请使用描边方法绘制该线。

Your browser does not support the HTML5 canvas tag.

输出：

在canvas上绘制圆

如果要在canvas上绘制圆，则可以使用arc()方法：

arc(x, y, r, start, stop) 

要在HTML canvas上绘制圆，请使用ink()方法之一，例如stroke()或fill()。

Your browser does not support the HTML5 canvas tag.

输出：

在canvas上绘制文字

有一些属性和方法可用于在canvas上绘制文本。

字体属性：用于定义文本的字体属性。

fillText(text，x，y)方法：用于在canvas上绘制填充文本。看起来像粗体。

strokeText(text，x，y)方法：它也用于在canvas上绘制文本，但是文本未填充。

让我们看一下fillText()方法示例。

Sorry! Your browser does not support the HTML5 canvas tag.

输出：

让我们看一下strokeText()方法示例。

 Sorry!Upgrade your browser. It does not support the HTML5 canvas tag.

输出：