根据页面加载的可变值上下移动画布线，并实现平滑过渡

Move canvas line up and down based on variable value on the page load with smooth transistion

本文关键字：布线 动画 实现 平滑 移动 上下 加载      更新时间：2023-09-26

我在画布上工作，我已经创建了垂直线，水平线，我到底想要根据变量值移动我的水平线，直到垂直线的高度。为此，我创建了一个函数move()在这个函数中，我有一个变量叫linemove。如果我的值是0，那么水平线应该在垂直线的底部，如果我在变量中输入值为20，它就会平稳地向上移动。如果我设置为100它就会移动到水平字体的顶部我不知道如何为垂直画布应用变量

这是我的javascript函数，我已经开始

function move()
{
 var linemove = 0;
}

这里是小提琴链接

提前感谢摩诃

首先，如果以后需要变量名，请尽量不要重用它们。这个问题的一个解决方案是，您可以向函数添加一个参数，并删除变量。然后你真正想要完成的是清除前面的线，并在不同的位置画线。我在这里编辑了你的代码:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(220, 200);
context.lineTo(220, 20);
context.stroke();
var canvas1 = document.getElementById('myCanvas1');
var context1 = canvas1.getContext('2d');
context1.beginPath();
context1.moveTo(20, 20);
context1.lineTo(80, 20);
context1.stroke();

function move(y)
{
    context1.clearRect(0,0,canvas1.width,canvas1.height);
    context1.beginPath();
    context1.moveTo(20, y);
    context1.lineTo(80, y);
    context1.stroke();
}

你只需要调用move(y)任意你想要的高度

相关文章：