<canvas>标签怎么覆盖在网页上

Posted 2023-05-04

马上过年了，我想给自己的网站放一个烟花效果，但是<canvas>放上去之后会把其他的DIV顶开，不会覆盖在网页上，请教如何解决。
类似这样的烟花效果，请问怎么使用呢？
http://sc.chinaz.com/jiaoben/140319429250.htm

参考技术A css的position，还有z-index可以控制层的位置。追问

用canvas画了一个烟花效果，想覆盖在网页上，style设置了position:fixed;z-index:99; 导致网站内容无法被点击。求教有什么解决办法？
如果设置成背景的话，又会被网站内容遮挡，烟花效果看不见了。

追答

做不到，不可能的，我还没有看到过类似的网页，除非你用flash制作网页。或者你可以使背景透明，这样还可以模模糊糊看到一些。

我知道了！

需不需要我告诉你啊？

本回答被提问者采纳

canvas与svg

　　canvas与svg都是用于在网页上绘制图形（位图）。

　　canvas是HTML5新出来的一个标签，用来定义一块画图的区域（canvas本身没有绘制能力），用JavaScript来画图，可以绘制路径、矩形、文本、图片以及圆形。

　　使用方式：

　　　　先在HTML里添加一个<canvas></canvas>标签，用行内样式设置宽高，然后在JavaScript里进行绘制。

　　SVG是可缩放矢量图形（scalable vector graphics）。

　　svg是用于绘制矢量图形，使用XML格式定义图形。使用起来方便，压缩性更好，可在任何分辨率下高质量打印，放大缩小不容易失真。

　　使用方式：

　　　　以前是用XML格式写好，保存成svg格式。然后HTML可以通过<embed></embed>（不推荐）<object></object>（不推荐）<inframe></inframe>这三个标签嵌入。

　　　　在HTML5中新增了<svg></svg>标签，在svg标签中添加<rect></rect>等各种形状标签就可以绘图；

　　对于canvas与svg：

　　　　1、canvas是逐个像素渲染绘制的，而且不能直接选到图形，所以要改动就只能全部都改，或直接选到相应坐标叠上去。而且每个图形不能直接添加事件，只能通过canvas的相应坐标来添加事件。也就是说，canvas是不能单独操作某个图形。

　　　　　　svg里面的图形都是一个标签，可以被获取、添加事件，修改之后浏览器也能重新绘图，修改方便；

　　　　2、canvas 文本渲染能力差，也比较依赖分辨率

　　　　　　svg不依赖分辨率，适合大型渲染，矢量图不易失真，适用于地图等图形的绘制

　　　　3、canvas 适用于图像密集重复的游戏绘制。

　　　　　　svg由于渲染问题，不方便做复杂 的图像，所以基本告别游戏。

　　在实际情况下，根据不同的情况自己判断吧。