JavaScript 繪製sin正弦函式曲線

螞蟻小編發表於2017-03-27
JavaScript函式

本章節分享一段程式碼例項，它使用js實現了sin正弦函式曲線圖的繪製。

這裡只分享程式碼，不對程式碼做太多的介紹，有興趣的朋友可以分析研究一下。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#canvas{ 
  background-color:green; 
} 
</style> 
<script type="text/javascript"> 
function draw(){ 
  var my_canvas=document.getElementById("canvas"); 
  var content=my_canvas.getContext("2d"); 
  content.beginPath(); 
  content.moveTo(10,100); 
  for(var i=1;i<200;i+=0.1){ 
    var x=i * 10; 
    var y = Math.sin( i ) * 10 + 100; 
    content.lineTo( x, y ); 
  } 
  content.stroke(); 
  content.closePath(); 
} 
window.onload=function(){
  draw();
}
</script> 
</head> 
<body> 
<canvas id = "canvas" width="400" height="400"></canvas> 
</body> 
</html>

上面通過JavaScript繪製了一個正弦曲線效果圖。

相關文章