JS特效第146弹：canvas下雨的河道透明背景

马coder

于 2024-02-13 01:30:00 发布

阅读量818

点赞数 17

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_38343072/article/details/136064349

版权

基于HTML5 canvas 2D画布绘制河道两边，漂泊大雨，水滴落下动画场景，这是一款透明的网页元素背景特效，先来看看效果：

一部分关键的代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>河流降雨</title>

<script type="text/javascript" src="js/jquery.min.js"></script>

<style>
html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.container{
    width: 100％;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000000;
}
</style>

</head>
<body>

<div id="jsi-water-line-container" class="container"></div>

<script type="text/javascript" src="js/script.js"></script>

</body>
</html>

全部代码：canvas下雨的河道透明背景