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

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

<!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, y: 120 },{ x: 354, y: 456 },{ x: 269, y: 85 },{ x: 456, y: 41 },{ x: 789, y: 120 },{ x: 876, y: 354 },
]
//开始运动
init(routes)function init (routes) {animatePoint = { x: 0, y: 0 }nextPointIndex = 1ctx.clearRect(0, 0, cvs.clientWidth, cvs.clientHeight)if (routes.length > 0) {points.push({x: routes[0].x,y: routes[0].y,})animatePoint = {x: routes[0].x,y: routes[0].y,}drawPoint(routes[0].x, routes[0].y)}if (routes.length > 1) {this.startTimer()}
}function startTimer () {startTime = new Date().getTime()if (routes.length > 1) {this.clearTimer()this.animate()}
}function clearTimer () {window.cancelAnimationFrame(timer)
}function animate () {timer = window.requestAnimationFrame(animate)startMove()
}function startMove () {let targetDistance = Math.sqrt(Math.pow(routes[nextPointIndex - 1].x - routes[nextPointIndex].x, 2) +Math.pow(routes[nextPointIndex - 1].y - routes[nextPointIndex].y, 2),)let currentDistance = Math.sqrt(Math.pow(routes[nextPointIndex - 1].x - animatePoint.x, 2) +Math.pow(routes[nextPointIndex - 1].y - animatePoint.y, 2),)if (currentDistance >= targetDistance) {//利用运动距离与目标距离, 判断运动的点是否超过下一个目标点, 超过了就重置下一个点startTime = new Date().getTime()points[nextPointIndex] = {x: routes[nextPointIndex].x,y: routes[nextPointIndex].y,}animatePoint = {x: routes[nextPointIndex].x,y: routes[nextPointIndex].y,}nextPointIndex++clearTimer()if (nextPointIndex <= routes.length - 1) {setTimeout(() => {startTimer()}, 500)}//重绘ctx.clearRect(0, 0, cvs.clientWidth, cvs.clientHeight)drawPolygon(points)drawPoint(animatePoint.x, animatePoint.y, 'yellow')return}if (nextPointIndex > routes.length - 1) {//轨迹运动结束后, 关闭timerclearTimer()animatePoint = {x: routes[routes.length - 1].x,y: routes[routes.length - 1].y,}} else {let speed = 0.25let deltaTime = new Date().getTime() - startTimelet deltaDistance = deltaTime * speedlet rate = deltaDistance / targetDistancelet x =routes[nextPointIndex - 1].x +(routes[nextPointIndex].x - routes[nextPointIndex - 1].x) * ratelet y =routes[nextPointIndex - 1].y +(routes[nextPointIndex].y - routes[nextPointIndex - 1].y) * rateanimatePoint.x = xanimatePoint.y = y//重绘, 将animatePoint设为轨迹的下一个点, 以达到动态的效果points[nextPointIndex] = {x: animatePoint.x,y: animatePoint.y,}ctx.clearRect(0, 0, cvs.clientWidth, cvs.clientHeight)drawPolygon(points)drawPoint(animatePoint.x, animatePoint.y, 'yellow')}
}function drawPoint (x, y, color) {//绘制点ctx.fillStyle = color || '#1DEFFF'ctx.strokeStyle = '#fff'if (!color) {ctx.shadowColor = '#FFF'ctx.shadowBlur = 10}ctx.beginPath()ctx.arc(x, y, 5, Math.PI * 2, 0, true)ctx.closePath()ctx.stroke()ctx.fill()
}function drawPolygon (points) {//绘制轨迹ctx.clearRect(0, 0, cvs.clientWidth, cvs.clientHeight)ctx.strokeStyle = '#1DEFFF'ctx.shadowColor = '#1DEFFF'ctx.shadowBlur = 10ctx.lineWidth = 4ctx.beginPath()ctx.moveTo(points[0].x, points[0].y)let i = 1,len = points.lengthfor (; i < len; i++) {ctx.lineTo(points[i].x, points[i].y)}ctx.stroke()let j = 0for (; j < len - 1; j++) {drawPoint(points[j].x, points[j].y)}
}
</script>
</body>
</html>

canvas轨迹运动, 利用向量实现点匀速运动相关推荐

css3运动后留下轨迹尾巴_利用CSS+JS实现唯美星空轨迹运动效果
先给大家分享效果图: 给大家分享一个使用CSS+JS实现的唯美星空轨迹运动效果, 这样的效果不输给Flash .相关代码如下: cloth body { background: #000; } i ...
canvas进阶——贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
写在最前在之前的这篇文章中我们提到了对于贝塞尔公式的运用.本次分享一下如何推导贝塞尔公式以及附一个简单的?即小球跟随曲线轨迹运动. 欢迎关注我的博客,不定期更新中-- 效果预览 demo地址对于如 ...
小折腾：JavaScript与元素间的抛物线轨迹运动
小折腾:JavaScript与元素间的抛物线轨迹运动这篇文章发布于 2013年12月30日,星期一,20:40,归类于 js实例. 阅读 61147 次, 今日 55 次 by zhangxinxu ...
Android Animation实现元素在屏幕上按照指定轨迹运动，以及出现NullPointerException的解决方案
因项目需要,在Android中实现了一个动画,当在Activity中点击特定按钮时,会在屏幕上添加一个ImageView,并按照指定的起点.终点,沿着特定的轨迹运动(例如直线). 实现方法实现思路是 ...
android滑屏轨迹运动,Android Animation实现元素在屏幕上按照指定轨迹运动，以及出现NullPointerException的解决方案...
因项目需要,在Android中实现了一个动画,当在Activity中点击特定按钮时,会在屏幕上添加一个ImageView,并按照指定的起点.终点,沿着特定的轨迹运动(例如直线). 实现方法实现思路是 ...
Canvas入门－利用Canvas绘制好玩的电子时钟
在这之前你需要了解一下方法的使用: beginPath() closePath() moveTo() lineTo() fill() stroke() fillRect() clearRect() ...
canvas 平滑运动_什么是电视上的运动平滑？人们为什么讨厌它？
canvas 平滑运动 Willy Barton/Shutterstock.com威利·巴顿/Shutterstock.com If you've just bought a new TV, you ...
PreScan中对象沿预设轨迹运动的若干方式介绍
环境:PreScan 8.5.0 1. 绘制预设轨迹手动绘制预设轨迹,分为三段.第一段前进,第二段后退,第三段圆弧. 最终得到的轨迹如图所示.最后将车辆拖放至轨迹上. 2. 考虑车辆动力学的 ...
BMapGL实现地图轨迹运动（地图视角不变）
BMapGL实现地图轨迹想要实现: 轨迹运动地图视角不能随之改变有icon标识运动当前的位位置总的说就是在BMapGl里实现BMap的轨迹运动功能由于数据之间的经纬度之间的距离太遥远,不能使用 ...

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

canvas轨迹运动, 利用向量实现点匀速运动相关推荐

最新文章

热门文章