canvas入门,跟随掘金小册如何使用 Canvas 制作出炫酷的网页背景特效学习,完成一个简单的 canvas 线条 demo,监听文档 document 的几个事件 mousemove、mouseleave、blur 来与背景线条交互, 当线条与鼠标相交时,停止线条运动
下面是代码,操作解释都有注释:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相交线</title>
<style>
*{
margin: 0;
padding: 0;
}
#line{
background: #eee;
display: block;
}
.control{
position: absolute;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<canvas id="line"></canvas>
<div class="control">
<button onclick="cancelAnimation()">停止动画</button>
<button onclick="continueAnimation()">继续动画</button>
</div>
</body>
<script>
const line = document.querySelector('#line'),
ctx = line.getContext('2d'),
WIDTH = document.documentElement.clientWidth,
HEIGHT = document.documentElement.clientHeight,
line_config = {
num: 20,
lineColor: '#ccc',
circleColor: '#000',
distance: 1,
animationId: null
};
[line.width, line.height] = [WID