canvas轨迹运动, 利用向量实现点匀速运动

最新推荐文章于 2023-12-11 10:30:26 发布

原创

最新推荐文章于 2023-12-11 10:30:26 发布 · 置顶 · 5.6k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #轨迹运动

本文介绍了如何利用canvas和向量知识，实现点在画布上的匀速轨迹运动，满足一个人员轨迹运动的编程需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做了一个人员轨迹运动的需求, 来分享下代码.

<!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 = { x: 0, y: 0 } //当前运动点位置
let nextPointIndex = 1 //下一个运动点的index

//源数据
let routes = [
  { x: 12, y: 666 },
  { x: 190,