使用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分不足以畫出一條平滑的線）。只需用for循環來完成，其中lines是片段的數量。

首先，我們開始通過移動點到畫布的左：

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

在大多數情況下，第一點也不會在中間。但對於正弦來說。（您可能想稍後修復它。）

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

這就是繪製曲線的循環。但我們應該放入什麼？那麼你可以把正弦函數返回的數字放大，把它倒過來，然後把它向下移動一半。我這樣做是因爲JavaScript中的座標系統是左上角的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

就這樣。 Viola，你已經成功在JavaScript中繪製了一張圖。

哦，是的，不要忘了真正告訴它畫在畫布上的for循環已完成其工作後：

context.stroke();

演示：http://jsfiddle.net/DerekL/hK5rC/

PS：我看到你正在嘗試使用CSS調整畫布的大小。相信我，這是行不通的。 :)你將不得不在HTML中定義維度。

來源

2014-04-21 22:00:47

的確很好的解釋！ –

使用HTML5畫布繪圖

回答

相關問題