의견 :이 기사는 주로 장미 곡선과 하트 모양 패턴을 구현하기위한 HTML5 캔버스의 코드 예제를 소개합니다. 필요한 친구는 그것을 참조 할 수 있습니다.
생식 이미지 :
팁 : 코드를 HTML 파일에 복사하여 저장 한 후 직접 열어 효과를 확인하십시오.
구현 코드 :
<! doctype html>
<html>
<헤드>
<meta charset = "gbk">
<title> html5 데모 </title>
<스타일 유형 = "텍스트/CSS">
#apdiv1 {
위치 : 절대;
너비 : 120px;
높이 : 300px;
z- 인덱스 : 1;
왼쪽 : 840px;
상단 : 80px;
}
</스타일>
</head>
<body>
<canvas>
브라우저는 캔버스 요소를 지원하지 않습니다. </캔버스>
<div>
<양식>
장미 곡선 방정식 :
r = a+bsin (m/n*x)
매개 변수 선택 :
m : <입력 유형 = "숫자"min = "2"max = "29"value = "29"/>
n : <입력 유형 = "숫자"min = "1"max = "12"value = "11"/>
a : <입력 유형 = "숫자"min = "0"max = "5"value = "1"/>
b : <입력 유형 = "숫자"min = "1"max = "7"value = "5"/>
<입력 유형 = "버튼"value = "draw">
<HR>
<입력 유형 = "버튼"value = "Drawing 2">
<HR>
<입력 유형 = "버튼"값 = "하트 차트">
</form>
</div>
<script type = "text/javaScript">
함수 draw () {
var ctx = document.getElementById ( 'canvas'). getContext ( '2d');
ctx.save ();
Ctx.Translate (400,300);
ctx.clearrect (-400, -300,800,600);
ctx.strokestyle = "#cc0000";
var a = 0, b = 1, m = 6, n = 1;
m = document.forms [0] .M.Value;
n = document.forms [0] .N.Value;
a = document.forms [0] .a. value;
b = document.forms [0] .B. value;
Drawrose (CTX, A, B, M, N);
ctx.restore ();
}
함수 DrawRose (CTX, A, B, M, N) {
ctx.beginpath ();
var e = 0, c = 120;
var k = 2 * math.pi / 360;
하다 {
var r = a / b + math.sin (m * e / n * k);
r = r * c;
var x = r * math.cos (e * k);
var y = r * math.sin (e * k);
e += 0.1;
ctx.lineto (x, y);
} while (e <= 4320);
ctx.stroke ();
}
함수 draw2 () {
var ctx = document.getElementById ( 'canvas'). getContext ( '2d');
ctx.save ();
Ctx.Translate (400,300);
ctx.clearrect (-400, -300,800,600);
ctx.strokestyle = "#cc0000";
ctx.beginpath (); //ctx.moveto(0,0);
var e = 0, c = 150;
var k = 2 * math.pi / 360;
하다 {
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);
} while (e <= 3600);
ctx.stroke ();
ctx.restore ();
}
함수 draw3 () {
var ctx = document.getElementById ( 'canvas'). getContext ( '2d');
ctx.save ();
Ctx.Translate (400,300);
ctx.clearrect (-400, -300,800,600);
ctx.strokestyle = "#ff0000";
ctx.beginpath ();
var x = 1, y;
하다 {
y = -80*(Math.sqrt (1 -x*x) + math.pow (x*x, 1/3));
x- = 0.001;
ctx.lineto (100*x, y);
} while (x> = -1);
하다 {
y = 80*(Math.sqrt (1 -x*x) -Math.pow (x*x, 1/3));
x += 0.001;
ctx.lineto (100*x, y);
} while (x <= 1);
ctx.closepath ();
var grad = ctx.createradialgradient (-40, -60,10, -40, -40,200);
grad.addcolorstop (0, "#ffcc00");
grad.addcolorstop (1, "#ff0000");
ctx.fillstyle = Grad;
ctx.fill ();
// ctx.stroke ();
ctx.restore ();
}
Window.onload = function () {
그리다();
}
</스크립트>
</body>
</html>