Javascript 繪制 sin 曲線過程附圖

更新時(shí)間：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>

動(dòng)態(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>

您可能感興趣的文章:

sin
曲線

相關(guān)文章

非html5實(shí)現(xiàn)js版彈球游戲示例代碼
彈球游戲，一般都是使用html5來實(shí)現(xiàn)的，其實(shí)不然，使用js也可以實(shí)現(xiàn)類似的效果，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-09-09
js計(jì)算頁面刷新的次數(shù)
用來計(jì)算頁面的刷新次數(shù)的js代碼。
2009-07-07
Js 本頁面?zhèn)髦祵?shí)現(xiàn)代碼
記得以前在學(xué)校的時(shí)候,例如要修改信息,需要要修改的部分的值顯示出來,都是先把數(shù)據(jù)傳到后臺(tái),然后再在前臺(tái)顯示的,想想真夠笨的,這個(gè)可以在客戶端就實(shí)現(xiàn)的,何必要傳到后臺(tái)呢
2009-05-05
js實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
js實(shí)現(xiàn)iGoogleDivDrag模塊拖動(dòng)層拖動(dòng)特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)iGoogleDivDrag模塊拖動(dòng)層拖動(dòng)特效的方法,實(shí)例分析了javascript操作拖動(dòng)層的技巧,需要的朋友可以參考下
2015-03-03
ThingJS粒子特效一鍵實(shí)現(xiàn)雨雪效果
在做3D項(xiàng)目時(shí)，我們經(jīng)常需要模擬下雨，下雪的天氣，有時(shí)也會(huì)模擬噴泉、著火等效果。這些效果需要使用名為粒子系統(tǒng)(particle)的技術(shù)來實(shí)現(xiàn)。使用ThingJS可以快速編寫粒子效果，本文就來看看如何實(shí)現(xiàn)
2021-05-05
js表單登陸驗(yàn)證示例
這篇文章主要介紹了js表單登陸驗(yàn)證的方法,基于thinkPHP前端頁面實(shí)現(xiàn)javascript針對(duì)表單用戶名與密碼的驗(yàn)證功能,需要的朋友可以參考下
2016-10-10
微信小程序使用第三方庫Immutable.js實(shí)例詳解
Immutable 是 Facebook 開發(fā)的不可變數(shù)據(jù)集合。不可變數(shù)據(jù)一旦創(chuàng)建就不能被修改，是的應(yīng)用開發(fā)更簡(jiǎn)單，允許使用函數(shù)式編程技術(shù)，比如惰性評(píng)估。微信小程序無法直接使用Immutable.js，下面就來說說微信小程序如何使用第三方庫Immutable.js。
2016-09-09
JS前端模塊化原理與實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JS前端模塊化原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JS前端模塊化具體概念、功能、原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
一文詳解JavaScript中的Mixin
類的出現(xiàn)最終使JavaScript非常容易使用繼承法,JavaScript類比大多數(shù)人意識(shí)到的更強(qiáng)大,它是構(gòu)建真正的mixins的良好基礎(chǔ)，本文介紹JavaScript中的Mixin介紹的非常詳細(xì)，需要的小伙伴可以參考閱讀一下
2023-04-04