欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

html5中标签的具体用法详解

程序员文章站 2022-04-11 19:23:03
...
<canvas>元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

canvas是HTML5中新定义的标签,顾名思义,它本身是一个画布标签,没有自己的行为,只是一个图形容器,必须使用脚本来绘制图形。下面是它用法的示例:

<canvas id="canvas" width="200" height="300">  
Your browser does not support HTML5 Canvas.  
</canvas>

从上述代码可以看出,canvas标签有三种属性:id,width,height.其中,定义id值是为了在JavaScript代码中用其引用该canvas标签,从而以canvas为接口进行绘画。width和height分别定义了canvas的宽度和高度,默认以像素为单位,数字后不能加px单位。

canvas标签不是所有浏览器都支持的,因此我们需要在canvas的开始和结束标签之间可以放置一段文本,当浏览器不支持canvas标签时,这段文本将显示在canvas标签所在的位置上,以提醒读者canvas标签不适用于此浏览器。在javascript中也要判断浏览器是否支持此标签:

var canvas=document.getElementById("canvas")  
if(!canvas.getContext)  
{  
alert("Your browser does not support HTML5 Canvas.")  
}  
else  
{  
//do something here  
}

可以用个canvas元素来显示一个红色的矩形:

<canvas id="Canvas"></canvas>  
<script type="text/Javascript">  
var canvas=document.getElementById('Canvas');  
var ctx=canvas.getContext('2d');  
ctx.fillStyle='#FF0000';  
ctx.fillRect(0,0,80,100);  
</script>

如上例,绘图API都没有定义在canvas元素本身上,而是定义在通过画布的getContext()方法获得的一个绘图环境对象上。canvas API也使用了路径的表示法。但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用beginPath()和arc()方法。一旦定义了路径,其他的方法如fill(),都是对此路径操作。

以上就是html5中<canvas>标签的具体用法详解的详细内容,更多请关注其它相关文章!

推荐阅读