简单来说<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