캔버스, 자바 스크립트 상호 작용?

Question

학교 수업의 일환으로 HTML5의 Canvas 요소를 사용하는 방법을 배우고 있습니다. 이는 자바 스크립트 작업 방법을 배우고 있음을 의미합니다. 할당은 무언가 그래픽과이 무언가 그래픽과 어떤 종류의 상호 작용을 생성하는 것입니다.

몇 가지 간단한 다이어그램을 만들고 사용자가 값을 입력하고 다이어그램이 변경되면 볼 수있게하기로 결정했습니다.

http://people.dsv.su.se/~tojo0551/graf/lines.html에는 몇 가지 다이어그램이 포함되어 있습니다. 까다로운 부분은 자바 스크립트로 작업하고 상호 작용을 작성하는 것입니다. 이것은 아마 쉬운 일이지만 JQuery를 제외하고 Javascript를 손대지 않았기 때문에 조금 전에 손실을 입었습니다.

내가 사용자가 하단의 막대 다이어그램과 상호 작용하고 1-5 사이의 값을 채우고 이에 따라 막대가 길어지기를 원합니다.

function bars(){ 

var canvas = document.getElementById("bars"); 
if (canvas.getContext) 
{ 

var ctx = canvas.getContext("2d"); 

var bar1 = canvas.getContext("2d"); 
bar1.fillStyle = "rgba(0, 50, 0, .2)"; 
bar1.fillRect(20, 400, 30, 90); 

var bar2 = canvas.getContext("2d"); 
bar2.fillStyle = "rgba(0, 50, 0, .4)"; 
bar2.fillRect(55, 360, 30, 130); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(90, 260, 30, 230); 

ctx.fillStyle = "rgba(0, 50, 0, .4)"; 
ctx.fillRect(125, 290, 30, 200); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(160, 270, 30, 220); 

ctx.fillStyle = "rgba(0, 50, 0, .4)"; 
ctx.fillRect(195, 250, 30, 240); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(230, 300, 30, 190); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(20, 400, 30, 90); 

ctx.fillStyle = "rgba(0, 50, 0, .4)"; 
ctx.fillRect(55, 360, 30, 130); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(90, 260, 30, 230); 

ctx.fillStyle = "rgba(0, 50, 0, .4)"; 
ctx.fillRect(125, 290, 30, 200); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(160, 270, 30, 220); 

ctx.fillStyle = "rgba(0, 50, 0, .4)"; 
ctx.fillRect(195, 250, 30, 240); 

ctx.fillStyle = "rgba(0, 50, 0, .2)"; 
ctx.fillRect(230, 300, 30, 190); 

를하지만 여기에서 어디로 가야합니까 :

캔버스 코드는 다음과 같습니다 간단하다? 프로그래밍에 익숙하지 않아 함수를 만들고 컨트롤을 선택 및 루프로 만드는 방법을 알고 있습니다. 저는 초보자 프로그래머입니다. 사용자 정의 컨트롤을 만들려면 어떻게해야할까요? 내가 일을 시작하기 전에 약간의 정보를 원한다. 그래서 나는 잘못된 방향으로 일하지 않는다. 어떻게 또는 아이디어를 얻었는지에 대한 좋은 조언을 얻은 페이지는 대단히 환영합니다. /토마스

Answer 1

이것은 매우 간단합니다. jQuery에 대한 경험이 있다면, 여기에 포함 시키면 더 간단해질 것입니다.

jQuery를 사용한다고 가정하면 사용자가 html 입력 값을 변경할 때마다 bars() 함수를 호출하면됩니다. 먼저 bar() 선언을 변경하여 값으로 호출 할 수있게하십시오. 이렇게 :

function bars(userVal) { 
    // All your existing code ... 
} 

그러면 마지막으로 bars()가 호출 된 시간을 지워야합니다. 의 clearRect는 원점 위치 (x 및 y)과, 높이와 폭 (w 및 h)을 취하고, 그 지역에서 캔버스를 취소한다

function bars(userVal) { 
    var canvas = document.getElementById("bars"); 
    if (canvas.getContext) { 
     var ctx = canvas.getContext("2d"); 
     // Clear the bars that were drawn last time 
     ctx.clearRect(x,y,w,h); 
     // The rest of your existing code ... 
    } 
} 

: 뭔가. 그리기 영역의 필요한 제한을 전달하십시오.

은 다음 페이지에 텍스트 입력을 추가하고, 마지막으로, 당신은 당신이 사용자가 입력 한 값으로 수행 할 작업을 결정해야합니다

$(document).ready(function() { 
    $("input").on("change", function() { 
     var value = $(this).val(); 
     bars(value); 
    }); 
}); 

을 변경된 때마다 바()를 호출하기 위해 jQuery를 사용합니다. 이것은 전적으로 당신에게 달렸지 만, 빠르고 쉬운 테스트를 통해 드로잉 호출 중 하나에서 숫자 값을 사용하는 것이 효과가 있는지 확인할 수 있습니다.

예 :

// This would change the start position of a bar 
ctx.fillRect(userVal, 260, 30, 230); 
// This would change the width of a bar 
ctx.fillRect(90, 260, userVal, 230); 
// This would change the colour of a bar 
ctx.fillStyle = "rgba(userVal, 50, 0, .4)"; 

재밌게.

Answer 2

fabricjs을 살펴보십시오. 캔버스를 사용하여 상대적으로 간단한 작업을 수행하는 것은 매우 복잡해지기 시작합니다. 상호 작용을 지원하기는하지만 일반적으로 삶이 편하게 보입니다. 기초를 아는 것이 중요하지만 목공 도구없이 집을 지 으려고하지 마십시오.

플롯팅에 관심이있는 경우 flot을 살펴보십시오.

우리 사이에 모험심이있는 사람은 three이며 3 차원을 그립니다. 비록 당신이 그렇게까지 노력해야 만합니다.