Rendering: Tipps: Kopieren Sie den Code in eine HTML-Datei und speichern Sie sie direkt, um den Effekt zu sehen. Implementierungscode: Code kopieren Der Code lautet wie folgt: HTML5-Demo <br> #apDiv1 {<br> Position:absolut;<br> Breite:120px;<br> Höhe:300px;<br> z-index:1;<br> links: 840px;<br> oben: 80px;<br> }<br> Ihr Browser unterstützt das Canvas-Element Rosenkurvengleichung: r=a bsin(m/n*x) Parameter auswählen: m: n: a: b: Funktion draw() { <br> var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); <br> ctx.translate(400,300); <br> ctx.clearRect(-400,-300,800,600);<br> ctx.StrokeStyle = "#cc0000"; var a = 0, b = 1, m = 6, n = 1;<br> m = document.forms[0].m.value;<br> n = document.forms[0].n.value;<br> a = document.forms[0].a.value; b = document.forms[0].b.value; drawRose(ctx,a,b,m,n); ctx.restore(); <br> } <br> Funktion drawRose(ctx,a,b,m,n){ <br> ctx.beginPath(); <br> var e = 0, c = 120; var k = 2 * Math.PI / 360;<br> mach { <br> var r = a/b Math.sin( m * e / n * k);<br> r = r * c; <br> var x = r * Math.cos( e * k );<br> var y = r * Math.sin( e * k );<br> e = 0,1; <br> ctx.lineTo(x,y); <br> } while ( e <= 4320 ); ctx.Stroke(); <br /> } <br /> Funktion draw2(){ <br /> var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); <br /> ctx.translate(400,300); <br /> ctx.clearRect(-400,-300,800,600);<br /> ctx.StrokeStyle = "#cc0000"; ctx.beginPath(); //ctx.moveTo(0,0);<br /> var e = 0, c = 150; var k = 2 * Math.PI / 360;<br /> mach { <br /> x = 150*Math.cos( 5/2 * e*k ) 50*Math.cos( 15/16 * 5/2 * e*k ); y = 150*Math.sin( 5/2 * e*k ) - 50*Math.sin( 15/16 * 5/2 * e*k ); e = 0,1; <br /> ctx.lineTo(x,y); <br /> } while ( e <= 3600 ); ctx.Stroke(); <br /> ctx.restore();<br /> } <br /> Funktion draw3(){ <br /> var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); <br /> ctx.translate(400,300); <br /> ctx.clearRect(-400,-300,800,600);<br /> ctx.StrokeStyle = "#ff0000"; ctx.beginPath(); <br /> var x = 1, y;<br /> mach { <br /> y = -80*(Math.sqrt(1-x*x) Math.pow(x*x,1/3)); x -= 0,001; <br /> ctx.lineTo(100*x,y); } while ( x >= -1 ); <br> mach { <br> y = 80*(Math.sqrt(1-x*x) - Math.pow(x*x,1/3)); x = 0,001; <br> ctx.lineTo(100*x,y); } while ( x <= 1 );<br /> ctx.closePath(); <br /> <br /> var grad = ctx.createRadialGradient(-40,-60,10,-40,-40,200);<br /> grad.addColorStop(0, "#ffcc00"); <br /> grad.addColorStop(1, "#ff0000"); <br /> ctx.fillStyle = grad;<br /> ctx.fill();<br /> // ctx.Stroke(); <br /> ctx.restore();<br /> } <br /> window.onload = function (){ <br /> draw();<br /> } <br />
