基于页面加载上的变量值向上和向下移动画布线,并顺利转换

时间:2014-07-20 19:06:07

标签: javascript jquery html5 canvas html5-canvas

我在画布上工作我创建了垂直线,水平线究竟是什么我要根据变量值移动我的水平线直到垂直线的高度。所以为此我在这个函数中创建了一个函数调用move()我有变量调用linemove。如果我的值为0,则水平线应该再次位于垂直线的底部。如果我在该变量中输入值20,则它必须平滑地向上移动。所以,如果我给100,它必须移到水平li的顶部我不知道如何为垂直画布应用变量

这是我开始使用的javascript函数

function move()
{
 var linemove = 0;
}

这是小提琴Link

提前致谢 诗

1 个答案:

答案 0 :(得分: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)。