Comentário: Este artigo apresenta principalmente dois exemplos de código de animação de rotação de tela HTML5 e realiza um efeito de diagrama de Tai Chi rotativo. Amigos que aprendem a animação de rotação da tela HTML5 podem se referir a ela.
Imagem de reprodução:
Método 1:
<html>
<Body>
<Canvas> y Na navegador não suporta a tag de tela </lvas>
<script type = "text/javascript">
var deg = 0;
var r = 30;
var rl = 100;
função drawtaiji () {
var canvas = document.getElementById ('mycanvas');
var context = Canvas.getContext ('2D');
var colora = "rgb (0, 0, 0)";
var colorb = "vermelho";
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, Verdadeiro);
context.ClosePath ();
context.fill ();
context.fillstyle = colorb;
context.BeginPath ();
Context.arc (RL, RL, 60, 1,5 * Math.Pi +Deg, 0,5 * Math.pi +gra, verdadeiro);
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 + gra, verdadeiro);
context.ClosePath ();
context.fill ();
context.fillstyle = colora;
context.BeginPath ();
context.arc (rl-px, rl + py, 30, 1,5 * math.pi + gra, 0,5 * math.pi + gra, verdadeiro);
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 ();
deg += 0,1;
}
setInterval (drawtaiji, 100);
</script> </p> <p> </body>
</html>
Método 2:
<! Doctype html>
<html>
<Body>
<Canvas> Seu navegador não suporta a etiqueta de tela </lvas>
<script type = "text/javascript">
var canvas = document.getElementById ('mycanvas');
var ctx = Canvas.getContext ("2D");
var angle = 0;
var count = 360;
var clra = '#000';
var clrb = 'vermelho';
função taiji (x, y, raio, ângulo, sábio) {
angleangle = ângulo || 0;
Wisewise = sábio? 1: -1;
ctx.save ();
ctx.Translate (x, y);
ctx.rotate (ângulo);
ctx.fillstyle = clra;
ctx.BeginPath ();
ctx.arc (0, 0, raio, 0, math.pi, verdadeiro);
ctx.fill ();
ctx.BeginPath ();
ctx.fillstyle = clrb;
ctx.arc (0, 0, raio, 0, math.pi, false);
ctx.fill ();
ctx.fillstyle = clrb;
ctx.BeginPath ();
ctx.arc (wise * -0.5 * raio, 0, raio / 2, 0, math.pi * 2, verdadeiro);
ctx.fill ();
ctx.BeginPath ();
ctx.fillstyle = clra;
ctx.arc (wise * +0.5 * raio, 0, raio / 2, 0, math.pi * 2, false);
ctx.arc (wise * -0.5 * raio, 0, raio / 10, 0, math.pi * 2, verdadeiro);
ctx.fill ();
ctx.BeginPath ();
ctx.fillstyle = clrb;
ctx.arc (wise * +0.5 * raio, 0, raio / 10, 0, math.pi * 2, true);
ctx.fill ();
ctx.restore ();
}
loop = setInterval (function () {
BEGINTAG = true;
ctx.clearrect (0, 0, canvas.width, canvas.Height);
Taiji (200, 200, 50, Math.pi * (ângulo / contagem) * 2, verdadeiro);
// taiji (350, 350, 50, math.pi * ((contagem - ângulo) /contagem) * 2, false);
ângulo = (ângulo + 5) contagem;
}, 50);
</script> </p> <p> </body>
</html>