html5 图形 标签,HTML5 canvas 标签介绍:定义图形

HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。

html 5 的第一份正式草案已于2008年1月22日公布[3]。html5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 html5 支持。2013年5月6日， html 5.1[5]正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言(html)。在这个版本中，新功能不断推出，以帮助web应用程序的作者，努力提高新元素互操作性。

支持Html5的浏览器包括Firefox(火狐浏览器)，IE9及其更高版本，Chrome(谷歌浏览器)，Safari，Opera等；国内的傲游浏览器(Maxthon)，以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。

HTML5 标签定义和用法

标签定义图形，比如图表和其他图像。Canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像。Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的API，从而生成动态的图形。

HTML5 HTML 4.01 与 HTML 5 之间的差异

标签是 HTML 5 中的新标签。

HTML5 标签的历史

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。

Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 标记。

我们甚至可以在 ie 中使用 标记，并在 ie 的 vml 支持的基础上用开源的 javascript 代码(由 google 发起)来构建兼容性的画布。参见：http://excanvas.sourceforge.net/。

的标准化的努力由一个 web 浏览器厂商的非正式协会在推进，目前 已经成为 html 5 草案中一个正式的标签。参见：http://www.whatwg.org/specs/web-apps/current-work/

标记和 SVG 以及 VML 之间的差异

标记和 SVG 以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。要从同一图形的一个 标记中移除元素，往往需要擦掉绘图重新绘制它。

如何使用 标记绘图

大多数 Canvas 绘图 API 都没有定义在 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。

一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。

注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 图形，必须要么自己绘制它再用位图图像合并它，或者在 上方使用 CSS 定位来覆盖 HTML 文本。

HTML5 标签属性

属性 值 描述

height pixels 设置 canvas 的高度。

width pixels 设置 canvas 的宽度。

HTML5 标签标准属性

HTML5 标签事件属性

ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,

HTML5 标签例子：

function drawCanvas()

{

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

}

...

your browser does not support the canvas tag

HTML5 标签绘制矩形例子

context.fillRect(x,y,width,height)  strokeRect(x,y,width,height)

x:矩形起点横坐标(坐标原点为canvas的左上角，当然确切的来说是原始原点，后面写到变形的时候你就懂了，现在暂时不用关系)

y:矩形起点纵坐标

width:矩形长度

height:矩形高度function draw21(id) {

var canvas = document.getElementById(id)

if (canvas == null)

return false;

var context = canvas.getContext("2d");

//实践表明在不设施fillStyle下的默认fillStyle=black

context.fillRect(0, 0, 100, 100);

//实践表明在不设施strokeStyle下的默认strokeStyle=black

context.strokeRect(120, 0, 100, 100);

//设置纯色

context.fillStyle = "red";

context.strokeStyle = "blue";

context.fillRect(0, 120, 100, 100);

context.strokeRect(120, 120, 100, 100);

//设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明

context.fillStyle = "rgba(255,0,0,0.2)";

context.strokeStyle = "rgba(255,0,0,0.2)";

context.fillRect(240,0 , 100, 100);

context.strokeRect(240, 120, 100, 100);

}

您可能感兴趣的文章: