javascript - 沿 HTML 画布中的一条线为点设置动画
问题描述
我需要为一个点设置动画以沿着这条线(航点)移动。它需要从顶部开始,沿着红线向右移动,然后向下沿着蓝线移动并重复。
我尝试使用 css,但我无法将点编程为沿着画布制作的这条线移动
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = '#FF0000';
ctx.moveTo(30, 0);
ctx.bezierCurveTo(60, 320, 150, 320, 600, 330);
ctx.stroke();
ctx.beginPath();
var ctx = canvas.getContext("2d");
ctx.moveTo(15, 0);
ctx.strokeStyle = '#000FFF';
ctx.bezierCurveTo(0, 340, 100, 350, 600, 350);
ctx.stroke();
ctx.beginPath();
var ctx = canvas.getContext("2d");
ctx.moveTo(15, 0);
ctx.strokeStyle = '#000FFF';
ctx.lineTo(30, 0);
ctx.stroke();
ctx.beginPath();
var ctx = canvas.getContext("2d");
ctx.moveTo(600, 330);
ctx.strokeStyle = '#000FFF';
ctx.lineTo(600, 350);
ctx.stroke();
<canvas id="myCanvas" height="350px;" width="600px"></canvas>
解决方案
为了实现这一点,你需要像这个例子一样计算航点- ,在你的情况下,你有一个曲线并且计算航点有点棘手,但没有什么不可能的jsfiddle
- 计算航点看到这个答案
- Waypoints 数组循环中的动画点
这是一个有一行的小例子,你可以添加你的颜色或线条
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var cBez1=[{x:30,y: 0},{x:60,y:320},{x:150,y:320},{x:600,y:330}];
drawBez(cBez1);
var cPoints=findCBezPoints(cBez1);
setInterval(timeanim, 1);
var indexi =0;
var opr = -1;
function timeanim()
{
//reset view
ctx.clearRect(0, 0, cw, ch);
drawBez(cBez1);
//draw dot
ctx.fillStyle='red';
ctx.beginPath();
ctx.arc(cPoints[indexi].x,cPoints[indexi].y,4,0,Math.PI*2);
ctx.fill();
if(indexi + opr > cPoints.length-2 || indexi + opr < 0){
opr *= -1;
}
indexi += opr;
}
function findCBezPoints(b){
var startPt=b[0];
var controlPt1=b[1];
var controlPt2=b[2];
var endPt=b[3];
var pts=[b[0]];
var lastPt=b[0];
var tests=5000;
for(var t=0;t<=tests;t++){
// calc another point along the curve
var pt=getCubicBezierXYatT(b[0],b[1],b[2],b[3], t/tests);
// add the pt if it's not already in the pts[] array
var dx=pt.x-lastPt.x;
var dy=pt.y-lastPt.y;
var d=Math.sqrt(dx*dx+dy*dy);
var dInt=parseInt(d);
if(dInt>0 || t==tests){
lastPt=pt;
pts.push(pt);
}
}
return(pts);
}
// Given the 4 control points on a Bezier curve
// Get x,y at interval T along the curve (0<=T<=1)
// The curve starts when T==0 and ends when T==1
function getCubicBezierXYatT(startPt, controlPt1, controlPt2, endPt, T) {
var x = CubicN(T, startPt.x, controlPt1.x, controlPt2.x, endPt.x);
var y = CubicN(T, startPt.y, controlPt1.y, controlPt2.y, endPt.y);
return ({
x: x,
y: y
});
}
// cubic helper formula
function CubicN(T, a, b, c, d) {
var t2 = T * T;
var t3 = t2 * T;
return a + (-a * 3 + T * (3 * a - a * T)) * T + (3 * b + T * (-6 * b + b * 3 * T)) * T + (c * 3 - c * 3 * T) * t2 + d * t3;
}
function drawPlots(pts){
ctx.fillStyle='red';
// don't draw the last dot b/ its radius will display past the curve
for(var i=0;i<pts.length-1;i++){
ctx.beginPath();
ctx.arc(pts[i].x,pts[i].y,1,0,Math.PI*2);
ctx.fill();
}
}
function drawBez(b){
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(b[0].x,b[0].y);
ctx.bezierCurveTo(b[1].x,b[1].y, b[2].x,b[2].y, b[3].x,b[3].y);
ctx.stroke();
}
<canvas id="canvas" width=700 height=600></canvas>
推荐阅读
- javascript - 从另一个组件 Ember 重新渲染一个组件
- azure - 从本地网络到 Azure 上所有 vnet 的站点到站点 Azure 隧道?
- module - 如何在 ABAQUS 的 UMAT 子程序中编写 Fortran 模块?
- json - 在 ASP.NET 核心 json 中的所有响应中添加一个字符串
- python - Google Dataflow:未定义全局名称 - apache beam
- python - 无法反序列化解码 JWT python 的关键数据
- javascript - 如果包含/不包含单选按钮值文本,则显示/隐藏 div
- java - 查找字符串中重复次数最多的单词
- java - CompletableFuture uniApply 方法
- python - 如何总结输入的数字范围?