렌더링: 팁: 코드를 html 파일로 복사한 후 직접 열어서 효과를 확인하세요. 구현 코드: 코드 복사코드는 다음과 같습니다. <메타 문자 집합 = "gbk"> HTML5 데모 <br> #apDiv1 {<br> 위치:절대;<br> 너비:120px;<br> 높이:300px;<br> Z-색인:1;<br> 왼쪽: 840px;<br> 상단: 80px;<br> }<br> </스타일><br> </머리><br> <br> <canvas id="canvas" width="800" height="600" style="border:1px solid #c3c3c3;"> 귀하의 브라우저는 </canvas> <div id="apDiv1"><br> <br> 장미 곡선 방정식: <br> r=a bsin(m/n*x)<br><br> 매개변수 선택: <br><br> m: <input type="number" name="m" min="2" max="29" value="29"/><br><br> n: <input type="number" name="n" min="1" max="12" value="11"/><br><br> a: <input type="number" name="a" min="0" max="5" value="1"/><br><br> b: <input type="number" name="b" min="1" max="7" value="5"/><br><br> <input type="button" value=" 그림 그리기 " onClick="draw();"><br><br> <시간><br> <input type="button" value=" 그림 2 그리기 " onClick="draw2();"><br><br> <시간><br> <input type="button" value=" 하트 모양 " onClick="draw3();"><br> </양식><br> </div><br> <스크립트 유형="텍스트/자바스크립트"> 함수 그리기() { <br> var ctx = document.getElementById('canvas').getContext('2d') <br> ctx.save() <br> ctx.translate(400,300) <br> ctx.clearRect(-400,-300,800,600);<br> ctx.StrokeStyle = "#cc0000" <br> 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 <br> b = document.forms[0].b.value <br> drawRose(ctx,a,b,m,n) <br> ctx.restore() <br> } <br> 함수 drawRose(ctx,a,b,m,n){ <br> ctx.beginPath() <br> var e = 0, c = 120 <br> var k = 2 * Math.PI / 360;<br> { <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) <br> } 동안( e <= 4320 ); ctx.스트로크() <br /> } <br /> 함수 draw2(){ <br /> var ctx = document.getElementById('canvas').getContext('2d') <br /> ctx.save() <br /> ctx.translate(400,300) <br /> ctx.clearRect(-400,-300,800,600);<br /> ctx.StrokeStyle = "#cc0000" <br /> ctx.beginPath(); //ctx.moveTo(0,0);<br /> var e = 0, c = 150 <br /> var k = 2 * Math.PI / 360;<br /> { <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) <br /> } while ( e <= 3600 <br /> ctx.스트로크() <br /> ctx.restore();<br /> } <br /> 함수 draw3(){ <br /> var ctx = document.getElementById('canvas').getContext('2d') <br /> ctx.save() <br /> ctx.translate(400,300) <br /> ctx.clearRect(-400,-300,800,600);<br /> ctx.StrokeStyle = "#ff0000" <br /> ctx.beginPath() <br /> 변수 x = 1, y;<br /> { <br /> 하세요 y = -80*(Math.sqrt(1-x*x) Math.pow(x*x,1/3)) <br /> x -= 0.001 <br /> ctx.lineTo(100*x,y) <br /> } while ( x >= -1 <br> <br> { <br> 하세요 y = 80*(Math.sqrt(1-x*x) - Math.pow(x*x,1/3)) <br> x = 0.001 <br> ctx.lineTo(100*x,y) <br> } 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.스트로크() <br /> ctx.restore();<br /> } <br /> window.onload = 함수(){ <br /> 그리기();<br /> } <br /> </script><br /> </본문><br> </div>
