Rendering: Petua: Salin kod ke fail html dan simpannya terus untuk melihat kesannya. Kod pelaksanaan: Salin kod Kod tersebut adalah seperti berikut: HTML5 Demo <br> #apDiv1 {<br> kedudukan:mutlak;<br> lebar:120px;<br> ketinggian:300px;<br> indeks-z:1;<br> kiri: 840px;<br> atas: 80px;<br> }<br> Penyemak imbas anda tidak menyokong elemen kanvas Persamaan Lengkung Mawar: r=a bsin(m/n*x) Pilih parameter: m: n: a: b: fungsi draw() { <br> var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); <br> ctx.translate(400,300); 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> fungsi drawRose(ctx,a,b,m,n){ <br> ctx.beginPath(); <br> var e = 0, c = 120; var k = 2 * Math.PI / 360;<br> lakukan { <br> var r = a/b Math.sin( m * e / n * k);<br> r = r * c; var x = r * Math.cos( e * k );<br> var y = r * Math.sin( e * k );<br> e = 0.1; ctx.lineTo(x,y); } manakala ( e <= 4320 ); ctx.stroke(); <br /> } <br /> fungsi draw2(){ <br /> var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); <br /> ctx.translate(400,300); 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 /> lakukan { <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; ctx.lineTo(x,y); } manakala ( e <= 3600 ); ctx.stroke(); <br /> ctx.restore();<br /> } <br /> fungsi draw3(){ <br /> var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); <br /> ctx.translate(400,300); ctx.clearRect(-400,-300,800,600);<br /> ctx.strokeStyle = "#ff0000"; ctx.beginPath(); <br /> var x = 1, y;<br /> lakukan { <br /> y = -80*(Math.sqrt(1-x*x) Math.pow(x*x,1/3)); x -= 0.001; ctx.lineTo(100*x,y); } manakala ( x >= -1 ); <br> lakukan { <br> y = 80*(Math.sqrt(1-x*x) - Math.pow(x*x,1/3)); x = 0.001; ctx.lineTo(100*x,y); } manakala ( 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"); ctx.fillStyle = grad;<br /> ctx.fill();<br /> // ctx.stroke(); <br /> ctx.restore();<br /> } <br /> window.onload = fungsi (){ <br /> lukis();<br /> } <br /> </skrip><br> </body><br> </html><br><br><br> </div>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
