效果图
![](https://img-blog.csdnimg.cn/9615bf55d8484f19822ecaecb83d4f9c.png)
<!DOCTYPE html>
<!-- saved from url=(0033)http://junior-l.gitee.io/to-lili/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>💗</title>
<style>
canvas {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .2);
}
</style>
</head>
<body>
<canvas id="heart" width="1920" height="947"></canvas>
<script>
window.requestAnimationFrame =
window.__requestAnimationFrame ||
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
(function () {
return function (callback, element) {
var lastTime = element.__lastTime;
if (lastTime === undefined) {
lastTime = 0;
}
var currTime = Date.now();
var timeToCall = Math.max(1, 33 - (currTime - lastTime));