之标签简要学习.docx

摘要: HTML5 提供了画布( canvas ) 标签, 通过与 Javascript 结合使用, 可以在网页上绘制图像。 Canvas 是一个矩形区域,使用 Javascript 可以控制其每一个像素。本文将对 canvas 标签进行简要的学****HTML5 提供了画布( canvas )标签,通过与 Javascript 结合使用,可以在网页上绘制图像。 Canvas 是一个矩形区域,使用 Javascript 可以控制其每一个像素。本文将对 canvas 标签进行简要的学****1、 canvas 标签说明 canvas 标签是一个矩形区域, 它包含两个属性 width 和 height , 分别表示矩形区域的宽和高, 这两个属性都是可选的, 并且都可以通过 css 来设定, 他们的默认值是 300px 和 150px 。 canvas 在网页中的形式如下: ?123 <canvas 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 判断浏览器是否支持: ?1234567891011121314 <canvas id="myCanvas" width= ”300 ”height= ”200 ”style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var myCanvas =("myCanvas"); if(!) {alert("Your browser does not support the canvas element."); }else {//dosomething here } </script> 解析: 上面的 Javascript 代码通过判断 getContext 方法是否为空来判断浏览器是否支持 canvas 标签。 3 、绘制线条和图案在没有 canvas 之前,想要在网页上面绘制线条或图案,是非常麻烦且不兼容的。我曾在《 js 画直线》一文中转载了网络上常用的在 IE和 FF 中绘制线条的方法,但如果想要这些方法通用,则是不可能的。但现在有了 canvas 标签,一切就变得简单了。现在,你只需要在页面上添加 canvas 标签,并通过 Javascript 调用它的相应方法,就可以轻松的在页面上绘制线条和图案。?1234567891011121314151617181920 //绘制线条<br><canvas