canvas绘制sin正弦曲线

快乐打工仔 分类:实例代码

canvas绘制sin正弦曲线属于前端实例代码,有关更多实例代码大家可以查看

本章节分享一段代码实例,利用canvas绘制正弦曲线图效果。

并且具有动态效果,代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css">
#theCanvas{ 
  background-color:#63F; 
} 
</style> 
<script type="text/javascript"> 
var i = 1; 
var x = 1; 
var y = 100; 
function moveSin(){ 
  var oCanvas=document.getElementById("theCanvas"); 
  var content=oCanvas.getContext( "2d" ); 
  content.beginPath(); 
  content.moveTo(x,y); 
  i+=0.1; 
  x=i*10; 
  y=Math.sin(i)*10+100; 
  content.lineTo(x,y); 
  content.stroke(); 
  content.closePath(); 
} 
setInterval(moveSin,10);
window.onload=function(){
  moveSin();
} 
</script> 
</head> 
<body> 
<canvas id="theCanvas" width="400" height="400"></canvas> 
</body> 
</html>

canvas绘制sin正弦曲线,这样的场景在实际项目中还是用的比较多的,关于canvas绘制sin正弦曲线就介绍到这了。

回复

我来回复
  • 暂无回复内容