Commentaire: Cet article présente principalement des exemples de code de toile HTML5 pour implémenter les courbes de rose et les motifs en forme de cœur. Les amis qui en ont besoin peuvent y faire référence.
Image de reproduction:
Astuce: copiez le code dans un fichier HTML et enregistrez-le, et ouvrez-le directement pour voir l'effet.
Code d'implémentation:
<! Doctype html>
<html>
<adal>
<meta charset = "gbk">
<Title> Html5 Demo </Title>
<style type = "text / css">
# apdiv1 {
Position: absolue;
Largeur: 120px;
hauteur: 300px;
Z-Index: 1;
Gauche: 840px;
en haut: 80px;
}
</ style>
</ head>
<body>
<lebvas>
Votre navigateur ne prend pas en charge l'élément Canvas. </ canvas>
<div>
<formulaire
Équation de la courbe rose:
r = a + bsin (m / n * x)
Sélectionner les paramètres:
m: <input type = "nombre" min = "2" max = "29" value = "29" />
n: <input type = "nombre" min = "1" max = "12" value = "11" />
a: <input type = "nombre" min = "0" max = "5" value = "1" />
b: <input type = "nombre" min = "1" max = "7" value = "5" />
<entrée type = "bouton" value = "Draw">
<hr>
<input type = "bouton" value = "Drawing 2">
<hr>
<input type = "Button" value = "Heart Chart">
</ form>
</div>
<script type = "text / javascript">
fonction 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 ();
}
Fonction Drawrose (ctx, a, b, m, n) {
ctx.beginPath ();
var e = 0, c = 120;
var k = 2 * math.pi / 360;
faire {
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 ();
}
fonction 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;
faire {
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 ();
}
fonction 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;
faire {
y = -80 * (math.sqrt (1-x * x) + math.pow (x * x, 1/3));
x - = 0,001;
ctx.lineto (100 * x, y);
} while (x> = -1);
faire {
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.creareadialgradient (-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 () {
dessiner();
}
</cript>
</docy>
</html>