HTML5 canvas 标签介绍:定义图形

本文由 169it 整理

HTML5介绍

    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> 标签订义和用法

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

  HTML5 <canvas> HTML 4.01 与 HTML 5 之间的差别

  <canvas> 标签是 HTML 5 中的新标签。

HTML5 <canvas> 标签的历史

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

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

   咱们甚至能够在 IE 中使用 <canvas> 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。参见：http://excanvas.sourceforge.net/。

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

     <canvas> 标记和 SVG 以及 VML 之间的差别

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

   如何使用 <canvas> 标记绘图

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

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

注释：Canvas API 很是紧凑的一个缘由上它没有对绘制文本提供任何支持。要把文本加入到一个 <canvas> 图形，必需要么本身绘制它再用位图图像合并它，或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。

HTML5 <canvas> 标签属性

属性 值 描述

height pixels 设置 canvas 的高度。

width pixels 设置 canvas 的宽度。

HTML5 <canvas> 标签标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant,

lang, ref, registrationmark, tabindex, template, title

HTML5 <canvas> 标签事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,

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

ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,

onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,

onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

HTML5 <canvas> 标签例子：

<script type="text/javascript">
function drawCanvas()
{
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
}
</script>
...
<canvas id="myCanvas">
your browser does not support the canvas tag
</canvas>

HTML5 <canvas> 标签绘制矩形例子

   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);
        }

本文来源:HTML5 canvas 标签介绍:定义图形