现在有哪些浏览器的哪些版本支持 HTML5

IE9支持部分，IE10+支持。Chrome3-5支持大部分，Chrome6+支持。iPad3.2+自带浏览器支持大部分。 *** 作方法如下：

1、首先创建一个新的html文件，简单重置样式，添加canvas，给画布一个红色背景。

2、这里用jquery写，所以先引入jquery，可以看到默认下的canvas的画布大小 300*150。

3、编写resizeCnavas方法，用来动态获取并改变canvas的大小。

4、在页面加载完先对canvas进行一次画布的设置。

5、窗口大小发生改变时，动态调用上面的方法。

6、最后再次打开浏览器，就获得了自适应的canvas画布。

DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行 *** 作。比如有一个 元素，可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体，图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。

Canvas的限制

在Canvas里，所有图形都绘制在帧上，绘制方法不会将绘制好的图形元素作为一个返回值输出，js也无法获取到已经绘制好的图形元素。比如：

代码如下:

cvs = document.getElementById('mycanvas')

ctx = canvas.getContext('2d')

theRect = ctx.rect(10, 10, 100, 100)

ctx.stroke()

console.log(theRect)//undefined

这段代码在canvas标签里绘制了一个矩形，首先可以看到绘制图形的rect方法没有返回值。如果打开浏览器的开发者工具，还可以看到canvas标签内部没有增加任何内容，而在js里获取到的canvas元素以及当前的上下文，也都没有任何表示新增图形的内容。

所以，前端常用的dom方法在canvas里是不适用的。比如点击上面Canvas里的矩形，实际点击的是整个Canvas元素。

给Canvas元素绑定事件

由于事件只能达到Canvas元素这一层，所以，如果想进一步深入，识别点击发生在Canvas内部的`哪一个图形上，就需要增加代码来进行处理。基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。比如上面的例子里画过一个矩形，该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里，就可以视为点击了该矩形，也就可以手动触发矩形需要处理的点击事件。思路其实比较简单，但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率，有些地方还需要重新判断事件类型，设置要重新定义一个Canvas内部的捕获和冒泡机制。

首先要做的，是给Canvas元素绑定事件，比如Canvas内部某个图形要绑定点击事件，就需要通过Canvas元素代理该事件：

代码如下:

cvs = document.getElementById('mycanvas')

cvs.addEventListener('click', function(e){

//...

}, false)

接下来需要判断事件对象发生的位置，事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持，Safari也打算移除，所以要做一些兼容写法：

代码如下:

function getEventPosition(ev){

var x, y

if (ev.layerX || ev.layerX == 0) {

x = ev.layerX

y = ev.layerY

} else if (ev.offsetX || ev.offsetX == 0) { // Opera

x = ev.offsetX

y = ev.offsetY

}

return {x: x, y: y}

}

//注：使用上面这个函数，需要给Canvas元素的position设为absolute。

现在有了事件对象的坐标位置，下面就要判断Canvas里的图形，有哪些覆盖了这个坐标。

isPointInPath方法

Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标，比如：

代码如下:

cvs = document.getElementById('mycanvas')

ctx = canvas.getContext('2d')

ctx.rect(10, 10, 100, 100)

ctx.stroke()

ctx.isPointInPath(50, 50)//true

ctx.isPointInPath(5, 5)//false

接下来增加一个事件判断，就可以判断一个点击事件是否发生在矩形上：

代码如下:

cvs.addEventListener('click', function(e){

p = getEventPosition(e)

if(ctx.isPointInPath(p.x, p.y)){

//点击了矩形

}

}, false)

以上就是处理Canvas事件的基本方法，但是上面的代码还有局限，由于isPointInPath方法仅判断当前上下文环境中的路径，所以当Canvas里已经绘制了多个图形时，仅能以最后一个图形的上下文环境来判断事件，比如：

代码如下:

在创建HTML5 canvas元素之前，首先要确保浏览器能够支持它。如果不支持，就要为那些古董级浏览器提供一些替代文字。下面的代码就是检测浏览器支持情况的一种方法。try { document.createElement("canvas").getContext("2d")document.getElementById("support").innerHTML = "HTML5 Canvas is supported in your browser."} catch (e) { } 上面的代码试图创建一个canvas对象，并且获取其上下文。如果发生错误，则可以捕获错误，进而得知该浏览器不支持canvas。页面中预先放入了ID为support的元素，通过以适当的信息更新该元素的内容，可以反映出浏览器的支持情况。 以上示例代码能判断浏览器是否支持canvas元素，但不会判断具体支持canvas的哪些特性。这个时候，示例中使用的API已经很稳定并且各浏览器也都提供了很好的支持，所以通常不必担心这个问题。 此外，希望开发人员能够像如上代码一样为canvas元素提供备用显示内容。

---