ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำตัวอย่างรหัสของผืนผ้าใบ HTML5 เพื่อใช้เส้นโค้งกุหลาบและรูปแบบรูปหัวใจ เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
ภาพการทำซ้ำ:
เคล็ดลับ: คัดลอกรหัสลงในไฟล์ HTML และบันทึกและเปิดโดยตรงเพื่อดูเอฟเฟกต์
รหัสการใช้งาน:
<! doctype html>
<html>
<head>
<meta charset = "gbk">
<tite> ตัวอย่าง HTML5 </title>
<style type = "text/css">
#apdiv1 {
ตำแหน่ง: สัมบูรณ์;
ความกว้าง: 120px;
ความสูง: 300px;
z-index: 1;
ซ้าย: 840px;
ด้านบน: 80px;
-
</style>
</head>
<body>
<Canvas>
เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบ Canvas </sanvas>
<div>
<form>
สมการโค้งกุหลาบ:
r = a+bsin (m/n*x)
เลือกพารามิเตอร์:
M: <อินพุต type = "number" min = "2" max = "29" value = "29"/>
n: <อินพุต type = "number" min = "1" max = "12" value = "11"/>
A: <อินพุต type = "number" min = "0" max = "5" value = "1"/>>
b: <อินพุต type = "number" min = "1" max = "7" value = "5"/>>
<input type = "button" value = "draw">
<Hr>
<อินพุต type = "button" value = "drawing 2">
<Hr>
<อินพุต type = "ปุ่ม" value = "แผนภูมิหัวใจ">
</form>
</div>
<script type = "text/javascript">
ฟังก์ชั่นวาด () {
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);
} ในขณะที่ (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);
} ในขณะที่ (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);
} ในขณะที่ (x> = -1);
ทำ {
y = 80*(math.sqrt (1 -x*x) - math.pow (x*x, 1/3));
x += 0.001;
ctx.lineto (100*x, y);
} ในขณะที่ (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 () {
วาด();
-
</script>
</body>
</html>