使用canvas+html实现烟花/流星特效

最新推荐文章于 2025-11-06 10:46:02 发布

原创

最新推荐文章于 2025-11-06 10:46:02 发布 · 4.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #css

先上代码，代码复制到txt文档然后重命名为html文件，用浏览器打开就可以看到。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Canvas流星雨特效</canvas></title> 
<style> 
*{
   
   margin: 0; padding: 0;} 
#canvas 
{
   
    
background: #000; 
display: block; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas">您的浏览器版本过低，请更换浏览器！</canvas> 
<script> 
var can=document.getElementById('canvas'); 
var ctx=can.getContext('2d'); 
var w=can.width=window.innerWidth; 
var h=can.height=window.innerHeight; 

var count=30; 
var drops=[]; 
window.οnresize=function() 
{
   
    
w=can.width=window.