HTML5 캔버스로 플로팅

나는 요소에 착수하기로 하루를 결심했으며, 지금까지는 그것이 작동하도록 악몽이었습니다. 내가 원하는 것은 사인 그래프를 그릴뿐입니다. 그래서 좋은 독서 후에 나는 아직도 기원을 얻지도 못하고 음모를 얻지도 못합니다. 아래는 내가 시도한 것입니다 (처음으로 그 태그를 사용하여 내 무지를 용서할 수 있습니다). 나를 궁금하게 만드는 것은 the guy here이지만 코드는 나처럼 초보자에게는 이해하기 어렵다.HTML5 캔버스로 플로팅

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Graphing</title> 
     <link type="text/css" rel="Stylesheet" href="graph.css" /> 
     <script type="text/JavaScript" src="graph.js" ></script> 
    </head> 

    <body> 
     <canvas id="surface">Canvas not Supported</canvas>   
    </body> 

</html>

의 범위 이후 CSS

#surface 
{ 
    width:300; 
    height:225; 
    border: dotted #FF0000 1px; 
}

에 javscript

window.onload = function() 
{ 
    var canvas = document.getElementById("surface"); 
    var context = canvas.getContext("2d"); 

    arr = [0,15, 30,45,60, 90,105, 120, 135, 150, 165, 180 ]; 
    var x=0; 
    var y = 0; 
    for(i=0; i<arr.length; i++) 
    { 
     angle = arr[i]*(Math.PI/180); //radians 
     sine = Math.sin(angle); 

     context.moveTo(x,y); 
     context.lineTo(angle,sine); 
     context.stroke(); 

     //set current varibles for next move 
     x = angle; 
     y = sine; 
    } 


}

출처

2014-04-21 Stefano Mtangoo

여기에서이 답변을 확인하십시오. 계속 진행할 수있는 내용이 있어야합니다. http://stackoverflow.com/questions/6032998/how-to-draw-a-curve-that-could-move-to-left-with -canvas –

코드를 제외한 일부 html 요소로 jsfiddle을 생성 할 수있었습니다. 여기를 보아라. http://jsfiddle.net/franktudor/4wv9r/ –

글쎄, 'sin'의 도메인은 -1과 1 사이입니다. 그래서 당신은 점만 볼 수 있습니다. –

은 [-1,1]이고 -1과 1 사이의 숫자 만 반환합니다. 그리면 화면에 점이 그려집니다.

0에서 180까지의 배열을 가지고있는 것을 볼 수 있습니다. 0도에서 180도까지 x으로 커브를 그려야한다고 생각하십니까? 이 작업을 실제로 수행 할 필요는 없습니다 (어쨌든 12 포인트는 매끄러운 선을 그리기에 충분하지 않습니다). lines이 조각의 수인 for 루프로 수행하십시오.

먼저 우리는 캔버스의 왼쪽에있는 점을 이동하여 시작 :

context.moveTo(0, 100 /*somewhere in the middle*/);  //initial point

대부분의 경우 첫 번째 점은 중간에되지 않습니다. 하지만 사인은 그렇습니다. (나중에 다시 고쳐야 할 수도 있습니다.)

for (var i = 0; i < lines; i++) { 
    //draw line 
}

커브를 그려주는 루프가 있습니다. 하지만 우리는 무엇을 넣어야합니까? 자 이제 사인 함수에서 반환 한 숫자를 가져 와서 크기를 조절하고 거꾸로 뒤집은 다음 반쯤 아래로 굴릴 수 있습니다. 자바 스크립트의 좌표계가 왼쪽 하단 대신 왼쪽 위의 0,0이기 때문에이 작업을 수행합니다.

var sine = Math.sin(i/scale*2)*scale; 
context.lineTo(i*frag, -sine+scale); 

//i * frag  = the position of x scaled up 
//-sine + scale = the position of y, flipped, scaled, shifted down 
//i/scale*2  = random scale I put in... you might want to figure out the 
//    correct scale with some math

그렇습니다. 비올라, 당신은 성공적으로 자바 스크립트로 그래프를 꾸몄다.

아 예, for 루프가 작업을 수행 한 후 실제로 캔버스에 그릴을 말하는 것을 잊지 말라 :

context.stroke();

데모 : http://jsfiddle.net/DerekL/hK5rC/

PS : 나는 당신이 CSS를 사용하여 캔버스의 크기를 조정하려한다는 것을 알고있다. 날 믿어. 작동하지 않을거야. :) HTML에서 차원을 정의해야합니다.

출처

2014-04-21 22:00:47

실제로 대단한 설명! –

HTML5 캔버스로 플로팅

답변

관련 문제