Kommentar: In diesem Artikel wird hauptsächlich Codebeispiele für HTML5-Leinwand zur Implementierung von Rosenkurven und herzförmigen Mustern vorgestellt. Freunde, die es brauchen, können sich darauf beziehen.
Reproduktionsbild:
Tipp: Kopieren Sie den Code in eine HTML -Datei und speichern Sie ihn und öffnen Sie ihn direkt, um den Effekt anzuzeigen.
Implementierungscode:
<! DocType html>
<html>
<kopf>
<meta charset = "gbk">
<title> html5 Demo </title>
<style type = "text/css">
#apdiv1 {
Position: absolut;
Breite: 120px;
Höhe: 300px;
Z-Index: 1;
links: 840px;
Top: 80px;
}
</style>
</head>
<body>
<Canvas>
Ihr Browser unterstützt das Canvas -Element nicht. </canvas>
<div>
<form>
Rosenkurvengleichung:
r = a+bsin (m/n*x)
Wählen Sie Parameter aus:
M: <Eingabe type = "number" min = "2" max = "29" value = "29"/>
N: <Eingabe type = "number" min = "1" max = "12" value = "11"/>
A: <Eingabe type = "number" min = "0" max = "5" value = "1"/>
B: <Eingabe type = "number" min = "1" max = "7" value = "5"/>
<input type = "button" value = "zeichnen">
<hr>
<Eingabe type = "Taste" value = "Drawing 2">
<hr>
<Eingabe type = "Taste" value = "Herzdiagramm">
</form>
</div>
<script type = "text/javaScript">
Funktion 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 ();
}
Funktion Drawrose (CTX, A, B, M, N) {
ctx.beginPath ();
var e = 0, c = 120;
var k = 2 * math.pi / 360;
Tun {
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 ();
}
Funktion 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;
Tun {
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 ();
}
Funktion 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;
Tun {
y = -80*(math.sqrt (1 -x*x) + math.pow (x*x, 1/3));
x -= 0,001;
ctx.lineto (100*x, y);
} while (x> = -1);
Tun {
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 () {
ziehen();
}
</script>
</body>
</html>