suchen

Heim >Web-Frontend >js-Tutorial >Javascript-Zeichnung Sin-Kurve-Prozessdiagramm_Javascript-Kenntnisse

Javascript-Zeichnung Sin-Kurve-Prozessdiagramm_Javascript-Kenntnisse

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 16:39:091570Durchsuche

Der Code für die Javascript-Zeichnungssündenkurve lautet wie folgt: 

<!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>

Dynamische Effekte: 

<!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>
Stellungnahme：
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
Vorheriger Artikel：jquery implementiert das automatische Hinzufügen des aktuellen Datums zum Datums-Plug-in, wenn die Seite geladen wird_jqueryNächster Artikel：jquery implementiert das automatische Hinzufügen des aktuellen Datums zum Datums-Plug-in, wenn die Seite geladen wird_jquery

In Verbindung stehende Artikel

Mehr sehen