HTML5之Cqnvqs标签简要学习.docx

摘要：HTML5 提供了画布（canvas）标签，通过与Javascript结合使用，可以在网页上绘制图像。Canvas是一个矩形区域，使用Javascript可以控制其每一个像素。本文将对canvas标签进行简要的学习。??? HTML5 提供了画布（canvas）标签，通过与Javascript结合使用，可以在网页上绘制图像。Canvas是一个矩形区域，使用Javascript可以控制其每一个像素。本文将对canvas标签进行简要的学习。　　1、canvas标签说明??? canvas标签是一个矩形区域，它包含两个属性width和height，分别表示矩形区域的宽和高，这两个属性都是可选的，并且都可以通过css来设定，他们的默认值是300px和150px。canvas在网页中的形式如下：?123canvas?id=myCanvas?width=”300” height=”200” style=border:1px solid #c3c3c3;Your browser does not support the canvas element./canvas?解析：??? 为canvas设置id属性是便于Javascript调用；??? 第二行是当浏览器不支持canvas标签时，将显示这行文字。　　2、检测浏览器支持　　Canvas标签并没有得到目前所有浏览器的支持，因此在使用canvas绘图的时候，要先检测客户端浏览器是否支持。下面的示例将通过Javascript判断浏览器是否支持：?1234567891011121314canvas?id=myCanvas?width=”300” height=”200” style=border:1px solid #c3c3c3;Your browser does not support the canvas element./canvasscript?type=text/javascript????var myCanvas = document.getElementById(myCanvas);????if (!myCanvas.getContext)????{????????alert(Your browser does not support the canvas element.);????}????else????{????????// do something here????}/script解析：　　上面的Javascript代码通过判断getContext方法是否为空来判断浏览器是否支持canvas标签。　　3、绘制线条和图案??? 在没有canvas之前，想要在网页上面绘制线条或图案，是非常麻烦且不兼容的。我曾在《js画直线》一文中转载了网络上常用的在IE和FF中绘制线条的方法，但如果想要这些方法通用，则是不可能的。但现在有了canvas标签，一切就变得简单了。??? 现在，你只需要在页面上添加canvas标签，并通过Javascript调用它的相应方法，就可以轻松的在页面上绘制线条和图案。?1234567891011121314151617181920//绘制线条brcanvas?id=myCanvas??style=border:1px solid #c3c3c3;Your browser does not support the canvas element./canvasscript?type=text/javascript????var myCanvas = document.getElementById(myCanvas);????if (!myCanvas.getContext)????{????????alert(Your browser does not support the canvas element.);????}????else????{????????var myContext = myCanvas.getContext(2d);????????myContext.moveTo(200, 150);????????myContext.lineTo(100, 100);????????myContext.lineTo(200, 50);????????myContext.strokeStyle = #FF0000;????????myContext.lineWidth = 4;????????myContext.stroke();????}?? /script解析：　　显示在页面中放置了一个canvas标签，设定id、width、height等属性，并为这个标签设定边框。　　在Javascript中检测浏览器是否支持　　当浏览器支持的时候开始