效果图
有运动轨迹、运动时渐变等
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<style lang="css">
.box {
width: 1000px;
height: 1000px;
/* background-color: aqua; */
position: relative;
}
.ctx {
position: absolute;
left: 0;
top: 0;
}
.ctx1 {
z-index: 1;
}
.ctx2 {
left: 500px;
top: 500px;
}
</style>
<body>
<div class="box">
<canvas id="canvas1" width="1000" height="1000" class="ctx ctx1"></canvas>
</div>
<script>
let canvas1 = document.getElementById('canvas1');
let ctx1 = canvas1.getContext('2d');
// 地图路线
ctx1.lineWidth = 2;
function animate() {
let ctx = this.ctx
ctx.clearRect(0, 0, 1500, 1500); //清除
f