📜  HTML Canvas标签

📅  最后修改于: 2020-11-01 09:02:57             🧑  作者: Mango

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 browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser 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.

输出: