最近做了一个人员轨迹运动的需求, 来分享下代码.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点轨迹运动</title>
<style>
.canvas-box {
width: 1400px;
height: 800px;
background: url("http://b-ssl.duitang.com/uploads/item/201202/14/20120214144725_HQ5mX.jpg") 0 0 no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div>
<div class="canvas-box">
<canvas id="canvas" width="1400" height="800">不支持canvas</canvas>
</div>
</div>
<script type="text/javascript">
let timer = 0
let cvs = document.getElementById('canvas')
let ctx = cvs.getContext('2d')
let points = [] //已经运动过的数据
let animatePoint