HTML学习笔记——标签<canvas>

来源:互联网 发布:哪个品牌的网络电视好 编辑:程序博客网 时间:2024/06/06 01:46

简单来说<canvas>类似于画布,通过canvas的API可以在画布上画画,多个画布可以叠加到一起,但除了在画布上绘制的图形外,其他的地方都是透明的,不会影响叠加在下面的画布的显示效果。

实现画布的层叠效果可以用css中的z-index,其取值越大,画布越靠上层。

下面说明一下<canvas>的坐标

以左上角为原点,x轴向右为正方向,y轴向下为正方向。

如果不给<canvas>指定宽高,则它默认宽为300px,为150px。

另外<canvas>也可以像其他标签一样指定它的样式,例如边框:

<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>

效果如下:

注意:如果当前浏览器不支持<canvas>,那么浏览器将会显示两个<canvas>标签之间的内容,否则浏览器会忽略这些内容。还有另外一种判断浏览器是否支持该标签的方式,详细的情况参见http://blog.csdn.net/jiulan1996/article/details/51291050

0 0
原创粉丝点击