先看效果
看起来很炫酷,其实就是实现了雨滴ide掉落还有最后的圆
还是看源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
// 获取画布
var canvas = document.querySelector('canvas')
// 获取画笔
var ctx = canvas.getContext('2d')
// 不能用css改变画布大小
var ch = canvas.height