Comentario: Este artículo presenta principalmente dos ejemplos de código de animación de rotación de lienzo HTML5, y realiza un efecto de diagrama de Tai Chi giratorio. Los amigos que aprenden la animación de rotación de lienzo HTML5 pueden referirse a ella.
Imagen de reproducción:
Método 1:
<html>
<Body>
El navegador <Canvas> Y no admite la etiqueta de lienzo </lienzo>
<script type = "text/javaScript">
var deg = 0;
var r = 30;
var rl = 100;
function drawTaiji () {
var lienvas = document.getElementById ('mycanvas');
var context = Canvas.getContext ('2d');
var colora = "rgb (0, 0, 0)";
var colorb = "rojo";
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, verdadero);
context.ClosePath ();
context.fill ();
context.fillstyle = Colorb;
context.beginPath ();
context.arc (rl, rl, 60, 1.5 * math.pi +deg, 0.5 * math.pi +DEG, verdadero);
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, verdadero);
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>
<VaS> Su navegador no admite la etiqueta de lienzo </lienvas>
<script type = "text/javaScript">
var lienvas = document.getElementById ('mycanvas');
var ctx = canvas.getContext ("2d");
ángulo var = 0;
Var Count = 360;
var clra = '#000';
var clrb = 'rojo';
función taiji (x, y, radio, ángulo, sabio) {
Angleangle = ángulo || 0;
sabio = sabio? 1: -1;
ctx.save ();
ctx.translate (x, y);
ctx.rotate (ángulo);
ctx.fillstyle = clra;
ctx.beginpath ();
ctx.arc (0, 0, radio, 0, math.pi, verdadero);
ctx.fill ();
ctx.beginpath ();
ctx.fillstyle = clrb;
ctx.arc (0, 0, radio, 0, math.pi, falso);
ctx.fill ();
ctx.fillstyle = clrb;
ctx.beginpath ();
ctx.arc (sabio * -0.5 * radio, 0, radio / 2, 0, math.pi * 2, verdadero);
ctx.fill ();
ctx.beginpath ();
ctx.fillstyle = clra;
ctx.arc (sabio * +0.5 * radio, 0, radio / 2, 0, math.pi * 2, falso);
ctx.arc (sabio * -0.5 * radio, 0, radio / 10, 0, math.pi * 2, verdadero);
ctx.fill ();
ctx.beginpath ();
ctx.fillstyle = clrb;
ctx.arc (sabio * +0.5 * radio, 0, radio / 10, 0, math.pi * 2, verdadero);
ctx.fill ();
ctx.restore ();
}
loop = setInterval (function () {
begintag = true;
CTX.CLEARRECT (0, 0, Canvas.Width, Canvas.Height);
Taiji (200, 200, 50, Math.pi * (ángulo / recuento) * 2, verdadero);
// taiji (350, 350, 50, math.pi * ((count - ángulo) /count) * 2, falso);
ángulo = (ángulo + 5) % de recuento;
}, 50);
</script> </p> <p> </body>
</html>