Manual de referência HTML

大全 de etiquetas HTML

Tag do HTML: <caption>Tag do HTML: <button>

Tag do HTML: <canvas>

HTML <canvas>标记是HTML5元素，用作在HTML文档中绘制2D对象和位图图像等图形的容器。该容器中的实际图形使用<script>标签绘制。此标记通常也称为<canvas>元素。

在线示例

通过<canvas>元素来显示一个蓝色正方形：

示例

!doctype　html>
<html>
<head>
<meta　charset="UTF-8">
<title>HTML5　canvas　by　pt.oldtoolbag.com</title>
</head>
<body>
<h1>Graphics　Example</h1>
<canvas　id="w3codebox_com_canvas"　width="125"　height="125></canvas>
<script>
　　var　canvas　=　document.getElementById("w3codebox_com_canvas");
　　var　ctx　=　canvas.getContext("2d");
　　ctx.fillStyle　=　"#4B6692";
　　ctx.fillRect(25,　25,　100,　100);
　　ctx.clearRect(45,　45,　60,　60);
　　ctx.strokeRect(50,　50,　50,　50);
</script>
</body>
</html>

测试看看 ‹/›

在此HTML5文档示例中，我们使用了<canvas>标记创建了一个大小为125px x 125px且ID为的容器w3codebox_com_canvas.<script>标记用于在此容器内绘制图形。在此示例中，我们绘制了一个带有斜面内部的蓝色正方形。

浏览器兼容性

IEFirefoxOperaChromeSafari

IE 9、Firefox、Opera、Chrome和Safari支持<canvas>标签。

Observação:IE 8 或更早版本的IE浏览器不支持<canvas>标签。

标签定义及使用说明

<canvas>标签通过脚本（通常是JavaScript）来绘制图形（比如图表和其他图像）。

A etiqueta <canvas> é apenas um contêiner de imagem, você deve usar scripts para desenhar gráficos.

O elemento <canvas> HTML está dentro da etiqueta <body>.
A etiqueta <canvas> atua como um contêiner de gráfico. Use a etiqueta <script> com a API de script do canvas ou a API WebGL para desenhar todos os gráficos fora da etiqueta <canvas>

HTML 4.01 e HTML5diferenças entre

A etiqueta <canvas> é um contêiner de gráfico no HTML5 novo etiqueta.

Dicas e observações sobre

Observação:Qualquer texto dentro do elemento <canvas> será exibido nos navegadores que não suportam <canvas>.

Dica:Para saber todos os atributos e métodos do objeto canvas, consulteManual de referência do HTML canvas.

Atributo

New　: HTML5 novo atributo no

Atributo	Valor	Descrição
heightHTML5	pixels	Define a altura do canvas.
widthHTML5	pixels	Define a largura do canvas.

Atributos globais

Suporte ao <canvas> etiqueta Atributos globais do HTML.

Atributos de eventos

Suporte ao <canvas> etiqueta Atributos de eventos do HTML.

Tag do HTML: <caption>Tag do HTML: <button>