부드러운 전환을 사용하여 페이지로드시 변수 값을 기반으로 캔버스 선을 위 아래로 이동

Question

캔버스에서 작업 중 세로선, 가로선 정확히 높이 값까지 가로 값을 기준으로 가로 선을 이동하고 싶습니다. 선. 그래서 나는이 함수에서 하나의 함수 호출 move()를 만들었습니다. 변수 호출 linemove가 있습니다. 내 값이 0이면 수평선이 다시 수직선의 맨 아래에 있어야합니다. 변수 20에 값을 입력하면 부드럽게 위로 이동해야합니다. 내가 그것을 수평 리튬의 상단으로 이동합니다 (100)를 준 경우 그래서 난 내 자바 스크립트 함수 내가 여기

function move() 
{ 
var linemove = 0; 
} 

를 시작하는 수직 캔버스 여기

에 대한 변수를 적용하는 방법이 아니하지 않습니다 사전에 바이올린 Link

감사 마하

Answer 1

첫째, 시도하지 나중에 필요할 위하여려고하는 경우에 변수 이름을 재사용. 문제에 대한 해결책은 함수에 매개 변수를 추가하고 변수를 제거 할 수 있다는 것입니다. 그런 다음 실제로 원하는 것은 이전 선을 지우고 선을 다른 위치에 그립니다. 여기에 코드를 편집했습니다 :

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(); 
} 

원하는 높이로 이동 (y)을 호출하면됩니다.