Kommentar: In diesem Artikel wird hauptsächlich zwei Code -Beispiele für HTML5 -Leinwand -Rotationsanimation vorgestellt und einen rotierenden Tai -Chi -Diagrammeffekt realisiert. Freunde, die HTML5 -Leinwand -Rotationsanimation lernen, können sich darauf beziehen.
Reproduktionsbild:
Methode 1:
<html>
<body>
<Canvas> y Browser unterstützt das Canvas -Tag </canvas> nicht
<script type = "text/javaScript">
var deg = 0;
var r = 30;
var rl = 100;
Funktion Dractaiji () {
var canvas = document.getElementById ('mycanvas');
var context = canvas.getContext ('2d');
var colora = "rgb (0, 0, 0)";
var colorb = "rot";
var px = math.sin (deg)*r;
var py = math.cos (deg)*r;
context.clearRect (0, 0, 300, 300);
context.beginPath ();
context.FillStyle = colora;
context.arc (rl, rl, 60, 0,5 * math.pi +deg, 1,5 * math.pi +deg, true);
context.closepath ();
context.fill ();
context.FillStyle = colorb;
context.beginPath ();
context.arc (rl, rl, 60, 1,5 * math.pi +deg, 0,5 * math.pi +deg, true);
context.closepath ();
context.fill ();
context.FillStyle = colorb;
context.beginPath ();
context.arc (rl + px, rl-py, 30, 0,5 * math.pi + deg, 1,5 * math.pi + deg, true);
context.closepath ();
context.fill ();
context.FillStyle = colora;
context.beginPath ();
context.arc (rl-px, rl + py, 30, 1,5 * math.pi + deg, 0,5 * math.pi + deg, true);
context.closepath ();
context.fill ();
context.FillStyle = colora;
context.beginPath ();
context.arc (rl+px, rl-py, 8, 0, 2 * math.pi, true);
context.closepath ();
context.fill ();
context.FillStyle = colorb;
context.beginPath ();
context.arc (rl-px, rl+py, 8, 0, 2 * math.pi, true);
context.closepath ();
context.fill ();
Grad += 0,1;
}
setInterval (Dractaiji, 100);
</script> </p> <p> </body>
</html>
Methode 2:
<! DocType html>
<html>
<body>
<Canvas> Ihr Browser unterstützt das Canvas -Tag </canvas> nicht
<script type = "text/javaScript">
var canvas = document.getElementById ('mycanvas');
var ctx = canvas.getContext ("2d");
var Winkel = 0;
var count = 360;
var clra = '#000';
var clrb = 'rot';
Funktion taiji (x, y, Radius, Winkel, Wise) {
angeleangle = Winkel || 0;
weise = weise? 1: -1;
ctx.save ();
ctx.translate (x, y);
ctx.rotate (Winkel);
Ctx.FillStyle = clra;
ctx.beginPath ();
ctx.arc (0, 0, radius, 0, math.pi, true);
ctx.fill ();
ctx.beginPath ();
ctx.FillStyle = clrb;
ctx.arc (0, 0, radius, 0, math.pi, false);
ctx.fill ();
ctx.FillStyle = clrb;
ctx.beginPath ();
ctx.arc (weise * -0,5 * radius, 0, radius / 2, 0, math.pi * 2, true);
ctx.fill ();
ctx.beginPath ();
Ctx.FillStyle = clra;
ctx.arc (weise * +0,5 * radius, 0, radius / 2, 0, math.pi * 2, false);
ctx.arc (weise * -0,5 * radius, 0, radius / 10, 0, math.pi * 2, true);
ctx.fill ();
ctx.beginPath ();
ctx.FillStyle = clrb;
ctx.arc (weise * +0,5 * radius, 0, radius / 10, 0, math.pi * 2, true);
ctx.fill ();
ctx.restore ();
}
Loop = setInterval (function () {
Begintag = wahr;
ctx.clearRect (0, 0, canvas.width, canvas.height);
Taiji (200, 200, 50, Math.pi * (Angle / Count) * 2, True);
// taiji (350, 350, 50, math.pi * ((Graf - Winkel) /Graf) * 2, falsch);
Winkel = (Winkel + 5) % zählen;
}, 50);
</script> </p> <p> </body>
</html>