Komentar: Artikel ini terutama memperkenalkan contoh kode kanvas HTML5 untuk mengimplementasikan kurva mawar dan pola berbentuk hati. Teman yang membutuhkannya bisa merujuknya.
Gambar reproduksi:
Kiat: Salin kode ke file HTML dan simpan, dan buka langsung untuk melihat efeknya.
Kode Implementasi:
<! Doctype html>
<Html>
<head>
<meta charset = "gbk">
<title> demo html5 </iteme>
<type style = "text/css">
#apdiv1 {
Posisi: Absolute;
Lebar: 120px;
Tinggi: 300px;
z-index: 1;
Kiri: 840px;
Atas: 80px;
}
</tyle>
</head>
<body>
<an kanvas>
Browser Anda tidak mendukung elemen kanvas. </ Canvas>
<div>
<sorm>
Persamaan Kurva Mawar:
r = a+bsin (m/n*x)
Pilih parameter:
m: <input type = "number" min = "2" max = "29" value = "29"/>
n: <input type = "number" min = "1" max = "12" value = "11"/>
A: <input type = "number" min = "0" max = "5" value = "1"/>
B: <input type = "number" min = "1" max = "7" value = "5"/>
<input type = "tombol" value = "draw">
<Hr>
<input type = "tombol" value = "Drawing 2">
<Hr>
<input type = "tombol" value = "Heart Chart">
</form>
</div>
<type skrip = "Teks/JavaScript">
function 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 ();
}
function drawrose (ctx, a, b, m, n) {
ctx.beginpath ();
var e = 0, c = 120;
var k = 2 * Math.pi / 360;
Mengerjakan {
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 ();
}
function 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;
Mengerjakan {
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 ();
}
function 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;
Mengerjakan {
y = -80*(Math.sqrt (1 -x*x) + math.pow (x*x, 1/3));
x -= 0,001;
ctx.lineto (100*x, y);
} while (x> = -1);
Mengerjakan {
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 = lulusan;
ctx.fill ();
// ctx.stroke ();
ctx.restore ();
}
window.onload = function () {
menggambar();
}
</script>
</body>
</html>