使用javascript的三角函數

我想使用javascript繪製cos曲線。我預計會看到一個很好的cos曲線，橫跨網頁。像這樣...
enter image description here 使用javascript的三角函數

我加了200把曲線向下移動，所以我可以看到整個事情。我乘以100因爲在html中沒有小數位。如果你看一下jsfiddle它是一個爛攤子

$(function(){  
    for (i=0; i<500; i++){ 
     var el = $('<div class="dot"></div>'); 
     var y = Math.cos(i*100) * 100 + 200; 
     var x = i ; 
     el.css({ 'left' : x+'px' , 'top':y+ 'px'}); 
     $('#main').after(el); 
    } 
});

來源

2012-09-11 eiu165

Cos參數以弧度表示！ –

根據https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Math/cos，「cos」函數需要一個弧度參數。你可能想嘗試從度數轉換爲弧度，看看它是否有幫助... –

你可能會有更好的運氣使用類似canvas的繪製曲線：http://stackoverflow.com/questions/6824391/how-to-draw -a-spiral-in-canvas' – scrappedcola

三角函數使用radians，不度。要角度和弧度之間的轉換，用公式

radians = Math.PI/180 * degrees

Here's顯示的東西識別小提琴的更新版本。

來源

2012-09-11 20:42:26 Jon

謝謝，這裏是改變x和y（在html y倒數）http://jsfiddle.net/eiu165/pXeAb/ – eiu165

http://jsfiddle.net/zerkms/RN7WN/13/

$(function(){  
    for (i=0; i< 2 * Math.PI; i+=0.01){ 
     //alert('aa'); 
     var el = $('<div class="dot"></div>'); 
     var x = Math.cos(i) * 100 + 100; 
     var y = i * 100 + 50; 
     el.css({ 'left' : x+'px' , 'top':y+ 'px'}); 
     $('#main').after(el); 
     //$('#main').after('<p>'+ l +'</p>'); 
    } 
});

來源

2012-09-11 20:43:02 zerkms

正如我在評論解釋之前，你需要從度由Math.PI/180乘以轉換爲弧度。

例如：

$(function(){  
    for (i=0; i<400; i++){ 
    var el = $('<div class="dot"></div>'); 
    var x = Math.sin(i * (Math.PI/180)) * 100; 
    var y = i + 200; 
    el.css({ 'left' : x+'px' , 'top':y+ 'px'}); 
    $('#main').after(el); 
    } 
});

Here是一個示範的jsfiddle的變化。

來源

2012-09-11 20:45:54

使用javascript的三角函數

回答

相關問題