canvas下雨打雷效果

最新推荐文章于 2023-05-17 20:07:34 发布

前端小白之路

最新推荐文章于 2023-05-17 20:07:34 发布

阅读量1.9k

点赞数 1

分类专栏： javascript 文章标签： canvas

本文链接：https://blog.youkuaiyun.com/m0_46597790/article/details/106758021

版权

本文通过canvas技术展示如何创建逼真的下雨打雷效果，直接以代码为主，简洁明了。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas下雨打雷效果

废话不多说，代码走起

*html部分*
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>canvas下雨打雷效果</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body onresize="_pexresize()">
    <canvas id="dowebok" width="1280" height="720"></canvas>
    <script src="js/script.js"></script>
</body>

</html>

body {
   
	margin: 0;
	background: #000;
}

canvas {
   
	background: url("../images/img1.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;<