H5新增--canvas标签
什么是canvas
canvas：HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成，<canvas> 标签只是图形容器，可以通过多种方法使用 canvas 绘制路径、盒、圆、字符以及添加图像。
(1) getContext() 方法返回一个用于在画布上绘图的环境 Canvas.getContext(contextID) 参数 contextID 指定了您想要在画布上绘制的类型。当 前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API
(2) cxt.stroke() 绘制线条
(3) canvas 和 image 在处理图片的时候有什么区别?
image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上.
基本语法
<canvas> 标签：定义图形，比如图表和其他图像。
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
因为 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
该标签只是图形容器，画布是一个矩形区域，使用者可以控制其每一像素，但必须使用脚本来绘制图形。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
语法：<canvas height="pixels" />
注释：Internet Explorer 8 以及更早的版本不支持 标签。
提示：如果无法显示出画布将会显示出该标签之间内的文本值；
例：通过 canvas 元素来显示一个红色的矩形：
<canvas id="Canvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
//JavaScript 使用 id 来寻找 canvas 元素：
var canvas=document.getElementById('Canvas')
//然后，创建 context 对象：
var ctx=canvas.getContext('2d')
//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
//下面的两行代码绘制一个红色的矩形：
//fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
ctx.fillStyle='#FF0000'
ctx.fillRect(0,0,80,150)
//fillRect值：x，y，w，h；
//意思是：在画布上绘制 80x150 的矩形，从左上角开始 (0,0)
</script>
| 属性 | 值 | 描述 |
|---|---|---|
| height | pixels | 设置 canvas 的高度。 |
| width | pixels | 设置 canvas 的宽度。 |
例：如何通过重设 width 或 height 属性来清空画布（使用 JavaScript）。 每当画布的高度或宽度被重设时，画布内容就会被清空
<canvas id="Canvas" width="200" height="200" style="border:1px solid">Your browser does not support the canvas element.</canvas>
<script type="text/javascript">
var c=document.getElementById("Canvas")
var cxt=c.getContext("2d")
cxt.fillStyle="#92B901"
cxt.fillRect(50,50,100,100)
function clearCanvas(){c.height=c.height}
</script>
<button onclick="clearCanvas()">清空画布</button>
//提示：每当画布的高度或宽度被重设时，画布内容就会被清空（请看页面底部的例子）。
例：把鼠标悬停在下面的矩形上可以看到坐标；
<head>
<style type="text/css">
body { font-size: 70%; font-family: verdana,helvetica,arial,sans-serif;margin:0px; }
</style>
<script type="text/javascript">
function cnvs_GetCoordinates(e){
x=e.clientX
y=e.clientY
document.getElementById("XYcoordinates").innerHTML="Coordinates: ("+x+","+y+")"
}
function cnvs_ClearCoordinates(){
document.getElementById("XYcoordinates").innerHTML=""
}
</script>
</head>
<body>
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_GetCoordinates(event)" onmouseout="cnvs_ClearCoordinates()"></div>
<div id="XYcoordinates"></div>
</body>
//画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
例：线条：通过指定从何处开始，在何处结束，来绘制一条线：
<canvas id="Canvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>
<script type="text/javascript">
var c=document.getElementById("Canvas")
var cxt=c.getContext("2d")
cxt.moveTo(10,10)
cxt.lineTo(150,50)
cxt.lineTo(10,50)
cxt.stroke()
</script>
canvas的基本用法
1.创建一个画布（Canvas）
规定元素的 id、宽度和高度（默认情况下 元素没有边框和内容。）：
<canvas id="myCanvas" width="200" height="100"></canvas>
2.向<canvas>元素上绘图
在HTML网页上定义canvas元素后，它只是一张空白的画布，为了向canvas上绘图，必须经过三步：
(1)获取canvas元素对应的DOM对象，这是一个Canvas对象。
(2)调用Canvas对象的getContext()方法，返回一个CanvasRenderingContext2D对象。
(3)调用CanvasRenderingContext2D对象的方法绘图。
