Javascript 繪制 sin 曲線過(guò)程附圖
更新時(shí)間：2014年08月21日 09:05:48 投稿：whsnow
這篇文章主要介紹了Javascript 繪制 sin 曲線過(guò)程,需要的朋友可以參考下
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>
相關(guān)文章
非html5實(shí)現(xiàn)js版彈球游戲示例代碼
彈球游戲，一般都是使用html5來(lái)實(shí)現(xiàn)的，其實(shí)不然，使用js也可以實(shí)現(xiàn)類(lèi)似的效果，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-09-09
用來(lái)計(jì)算頁(yè)面的刷新次數(shù)的js代碼。2009-07-07
Js 本頁(yè)面?zhèn)髦祵?shí)現(xiàn)代碼
記得以前在學(xué)校的時(shí)候,例如要修改信息,需要要修改的部分的值顯示出來(lái),都是先把數(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ù)來(lái)實(shí)現(xiàn)。使用ThingJS可以快速編寫(xiě)粒子效果，本文就來(lái)看看如何實(shí)現(xiàn)2021-05-05
這篇文章主要介紹了js表單登陸驗(yàn)證的方法,基于thinkPHP前端頁(yè)面實(shí)現(xiàn)javascript針對(duì)表單用戶名與密碼的驗(yàn)證功能,需要的朋友可以參考下2016-10-10
微信小程序使用第三方庫(kù)Immutable.js實(shí)例詳解
Immutable 是 Facebook 開(kāi)發(fā)的不可變數(shù)據(jù)集合。不可變數(shù)據(jù)一旦創(chuàng)建就不能被修改，是的應(yīng)用開(kāi)發(fā)更簡(jiǎn)單，允許使用函數(shù)式編程技術(shù)，比如惰性評(píng)估。微信小程序無(wú)法直接使用Immutable.js，下面就來(lái)說(shuō)說(shuō)微信小程序如何使用第三方庫(kù)Immutable.js。2016-09-09
這篇文章主要介紹了JS前端模塊化原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JS前端模塊化具體概念、功能、原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
類(lèi)的出現(xiàn)最終使JavaScript非常容易使用繼承法,JavaScript類(lèi)比大多數(shù)人意識(shí)到的更強(qiáng)大,它是構(gòu)建真正的mixins的良好基礎(chǔ)，本文介紹JavaScript中的Mixin介紹的非常詳細(xì)，需要的小伙伴可以參考閱讀一下2023-04-04