canvas标签

　　html<canvas>标签用于在 HTML 文档中动态创建图形。它可用于渲染图形、游戏图形、精美文本或其他图像。

　　该标签本身会渲染一个空白画布。若要在画布上绘图，则<canvas>需要将该标签与 javascript 结合使用（使用getContext()方法）。

　　标签之间的任何内容<canvas></canvas>都是“后备内容” - 也就是说，只有当画布无法显示时才会显示它。

　　该<canvas>标签是在 HTML 5 中引入的。

　　该<canvas>标签的写法为，<canvas id=""></canvas>任何后备内容都插入在开始和结束标签之间。仅当浏览器不支持该<canvas>元素时，才会显示此后备内容。

　　height您还可以分别使用和属性指定画布的高度和宽度width。如果不使用这些属性，画布将以默认大小呈现，即宽度为300，高度为150。

　　为了使其<canvas>真正显示某些内容，您需要添加属性id并使用一些 JavaScript<canvas>引用id。

　　使用元素绘制文本的示例。

　　<canvas id="Text"><p>Your browser does not support the canvas tag.</p></canvas>
　　<script>
　　var canvasText = document.getElementById("Text");
　　if (canvasText.getContext) {
　　var ctxText = canvasText.getContext("2d");
　　var text = 'Canvas';
　　ctxText.font = '60pt Cursive';
　　ctxText.fillStyle = '#fc0';
　　ctxText.strokeStyle = '#f90';
　　ctxText.fillText(text, 3, 62);
　　ctxText.strokeText(text, 1, 60);
　　}
　　</script>

　　可以使用元素绘制具有各种填充和不透明度级别的矩形，您还可以使用<canvas>元素绘制贝塞尔曲线。为此，请使用bezierCurveTo，其工作原理类似于计算机绘图软件包（例如 Adob??e Illustrator、GIMP等）中的贝塞尔和路径工具。以及像上面例子中元素绘制文本，甚至可以使用元素<canvas>来绘制图像。要绘制图像，请使用drawImage()方法。这需要您提供图像的 URL

　　该<canvas>元素接受以下属性。

　　width

　　height

　　全局属性

　　以下属性是所有 HTML 元素的标准属性。因此，您可以将这些属性与 标签<canvas>以及所有其他 HTML 标签一起使用。

　　accesskey

　　autocapitalize

　　class

　　contenteditable

　　data-*

　　dir

　　draggable

　　hidden

　　id

　　inputmode

　　is

　　itemid

　　itemprop

　　itemref

　　itemscope

　　itemtype

　　lang

　　part

　　slot

　　spellcheck

　　style

　　tabindex

　　title

　　translate

　　有关这些属性的完整解释，请参阅HTML 5 全局属性。

　　事件处理程序

　　事件处理程序内容属性可让您从 HTML 中调用脚本。当发生某个“事件”时，将调用该脚本。每个事件处理程序内容属性处理不同的事件。

　　onabort

　　onauxclick

　　onblur

　　oncancel

　　oncanplay

　　oncanplaythrough

　　onchange

　　onclick

　　onclose

　　oncontextmenu

　　oncopy

　　oncuechange

　　oncut

　　ondblclick

　　ondrag

　　ondragend

　　ondragenter

　　ondragexit

　　ondragleave

　　ondragover

　　ondragstart

　　ondrop

　　ondurationchange

　　onemptied

　　onended

　　onerror

　　onfocus

　　onformdata

　　oninput

　　oninvalid

　　onkeydown

　　onkeypress

　　onkeyup

　　onlanguagechange

　　onload

　　onloadeddata

　　onloadedmetadata

　　onloadstart

　　onmousedown

　　onmouseenter

　　onmouseleave

　　onmousemove

　　onmouseout

　　onmouseover

　　onmouseup

　　onpaste

　　onpause

　　onplay

　　onplaying

　　onprogress

　　onratechange

　　onreset

　　onresize

　　onscroll

　　onsecuritypolicyviolation

　　onseeked

　　onseeking

　　onselect

　　onslotchange

　　onstalled

　　onsubmit

　　onsuspend

　　ontimeupdate

　　ontoggle

　　onvolumechange

　　onwaiting

　　onwheel

　　大多数事件处理程序内容属性可以在所有 HTML 元素上使用，但某些事件处理程序对其使用时间以及适用元素有特定的规则。