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>
相關文章
javascript獲取所有同類checkbox選項(實例代碼)
javascript獲取所有同類checkbox選項的簡單實例。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
javascript中程序是怎么可以中斷執(zhí)行，然后一步一步走下去。而且debug的時候，可以看到變量，調用棧等東西。這個是如何實現(xiàn)的？2016-04-04
下面小編就為大家?guī)硪黄猨query div模態(tài)窗口的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)3D旋轉效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了JS中Select下拉列表類(支持輸入模糊查詢)功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
下面小編就為大家分享一篇使用百度地圖實現(xiàn)地圖網格的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了微信小程序環(huán)境下將文件上傳到OSS的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
JS中的alert作用是在瀏覽器中彈出一個警告框,而使用alert有三種方式,不同的方式所呈現(xiàn)的效果也不相同,這篇文章主要給大家介紹了關于JavaScript中alert使用方法的相關資料,需要的朋友可以參考下2024-01-01
為超鏈接加上disabled后的故事，學習js的朋友可以參考下對超鏈接的一些控制。2010-12-12
這篇文章主要介紹了javascript函數式編程,實例分析了javascript函數式編程的相關使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04