简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > js-Tutorial > Hauptteil

Javascript 绘制 sin 曲线过程附图_javascript技巧

WBOY
Freigeben： 2016-05-16 16:39:09
Original
1472 Leute haben es durchsucht

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>
Nach dem Login kopieren

动态效果：

<!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>
Nach dem Login kopieren
Verwandte Etiketten：
sin 曲线
Quelle：php.cn
Vorheriger Artikel：jquery实现在页面加载的时自动为日期插件添加当前日期_jquery Nächster Artikel：js中实现多态采用和继承类似的方法_javascript技巧
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
java - Spring Security + Tomcat SSO 请教各位大神， 我有多个 Webapps 部署在一个 Tomcat 上。每个 Webapp 都使用 Spring Security 控制机制，进行用户认证和权授。 这个后台认证和权...
Aus 2017-04-18 10:05:43
0
2
623
ios - 如图，tableview cell中内容实现一个折纸展开和收起的动画，cell的高度同时实现一个正弦或余弦的变化 如图，动画已经实现，cell高度通过定时器的方式做了一下，没有达到应该有的效果，有什么好的实现方式么，cell动画是线性的，展开的时候cell的高度增加是sin 0-pi/2 乘以...
Aus 2017-04-17 17:18:03
0
1
480
python - 如果直接使用＂用户输入的函数＂？ 是这样的，我写了一个简单的用python求数值积分的程序，运行是正确的。 比如我想求sin(x)/x，在x从0到1的数值积分，首先我要定义一个函数(（我用的是Python2.7） ...
Aus 2017-04-17 13:05:09
0
2
231
javascript - 正弦余弦是什么 写的这个加载，就是用的sin和cos。 但是一直不知道这个sin和cos原理是什么。为什么给他一个弧度他会返回0-1， sin他是X轴还是Y轴？ 我是小白， 大神手下留情！
Aus 2017-04-11 11:32:09
0
1
182
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！