Javascript 繪制 sin 曲線過程附圖
更新時間：2014年08月21日 09:05:48 投稿：whsnow
這篇文章主要介紹了Javascript 繪制 sin 曲線過程,需要的朋友可以參考下
Javascript 繪制 sin 曲線代碼如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#MyCanvas {
background-color: cornflowerblue;
}
</style>
<script type="text/javascript">
function draw(){
var my_canvas = document.getElementById( "MyCanvas" );
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();
}
</script>
</head>
<body onload="draw()">
<canvas id = "MyCanvas" width="400" height="400"></canvas>
</body>
</html>
動態(tài)效果：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#MyCanvas {
background-color: cornflowerblue;
}
</style>
<script type="text/javascript">
var i = 1;
var x = 1;
var y = 100;
function moveSin(){
var my_canvas = document.getElementById( "MyCanvas" );
var content = my_canvas.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 );
</script>
</head>
<body onload="moveSin()">
<canvas id = "MyCanvas" width="400" height="400"></canvas>
</body>
</html>
相關(guān)文章
彈球游戲，一般都是使用html5來實現(xiàn)的，其實不然，使用js也可以實現(xiàn)類似的效果，下面有個不錯的示例，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
用來計算頁面的刷新次數(shù)的js代碼。2009-07-07
記得以前在學(xué)校的時候,例如要修改信息,需要要修改的部分的值顯示出來,都是先把數(shù)據(jù)傳到后臺,然后再在前臺顯示的,想想真夠笨的,這個可以在客戶端就實現(xiàn)的,何必要傳到后臺呢2009-05-05
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)圖片跟隨鼠標(biāo)移動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
js實現(xiàn)iGoogleDivDrag模塊拖動層拖動特效的方法
這篇文章主要介紹了js實現(xiàn)iGoogleDivDrag模塊拖動層拖動特效的方法,實例分析了javascript操作拖動層的技巧,需要的朋友可以參考下2015-03-03
在做3D項目時，我們經(jīng)常需要模擬下雨，下雪的天氣，有時也會模擬噴泉、著火等效果。這些效果需要使用名為粒子系統(tǒng)(particle)的技術(shù)來實現(xiàn)。使用ThingJS可以快速編寫粒子效果，本文就來看看如何實現(xiàn)2021-05-05
這篇文章主要介紹了js表單登陸驗證的方法,基于thinkPHP前端頁面實現(xiàn)javascript針對表單用戶名與密碼的驗證功能,需要的朋友可以參考下2016-10-10
Immutable 是 Facebook 開發(fā)的不可變數(shù)據(jù)集合。不可變數(shù)據(jù)一旦創(chuàng)建就不能被修改，是的應(yīng)用開發(fā)更簡單，允許使用函數(shù)式編程技術(shù)，比如惰性評估。微信小程序無法直接使用Immutable.js，下面就來說說微信小程序如何使用第三方庫Immutable.js。2016-09-09
這篇文章主要介紹了JS前端模塊化原理與實現(xiàn)方法,結(jié)合實例形式分析了JS前端模塊化具體概念、功能、原理、實現(xiàn)方法及相關(guān)操作注意事項,需要的朋友可以參考下2020-03-03
類的出現(xiàn)最終使JavaScript非常容易使用繼承法,JavaScript類比大多數(shù)人意識到的更強(qiáng)大,它是構(gòu)建真正的mixins的良好基礎(chǔ)，本文介紹JavaScript中的Mixin介紹的非常詳細(xì)，需要的小伙伴可以參考閱讀一下2023-04-04