Commentaire: Cet article introduit principalement deux exemples de code d'animation de rotation du canevas HTML5 et réalise un effet de diagramme de tai-chi rotatif. Les amis qui apprennent l'animation de rotation du canevas HTML5 peuvent y faire référence.
Image de reproduction:
Méthode 1:
<html>
<body>
<canvas> y Le navigateur ne prend pas en charge la balise de canevas </ canvas>
<script type = "text / javascript">
var deg = 0;
var r = 30;
var rl = 100;
fonction drawtaiji () {
var canvas = document.getElementById ('myCanvas');
var context = canvas.getContext ('2d');
var colora = "rgb (0, 0, 0)";
var colorb = "rouge";
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 ();
DEG + = 0,1;
}
setInterval (drawtaiji, 100);
</cript> </p> <p> </ body>
</html>
Méthode 2:
<! Doctype html>
<html>
<body>
<Hisecles> Votre navigateur ne prend pas en charge la balise Canvas </bovvas>
<script type = "text / javascript">
var canvas = document.getElementById ('myCanvas');
var ctx = canvas.getContext ("2d");
angle var = 0;
Var Count = 360;
var clra = '# 000';
var clrb = 'rouge';
fonction taiji (x, y, rayon, angle, sage) {
angleAngle = angle || 0;
wisewise = sage? 1: -1;
ctx.save ();
ctx.translate (x, y);
ctx.rotate (angle);
ctx.fillStyle = clra;
ctx.beginPath ();
ctx.arc (0, 0, rayon, 0, math.pi, true);
ctx.fill ();
ctx.beginPath ();
ctx.fillStyle = clrb;
ctx.arc (0, 0, rayon, 0, math.pi, false);
ctx.fill ();
ctx.fillStyle = clrb;
ctx.beginPath ();
ctx.arc (wise * -0.5 * rayon, 0, rayon / 2, 0, math.pi * 2, true);
ctx.fill ();
ctx.beginPath ();
ctx.fillStyle = clra;
ctx.arc (wise * +0.5 * rayon, 0, rayon / 2, 0, math.pi * 2, false);
ctx.arc (wise * -0.5 * rayon, 0, rayon / 10, 0, math.pi * 2, true);
ctx.fill ();
ctx.beginPath ();
ctx.fillStyle = clrb;
ctx.arc (wise * +0.5 * rayon, 0, rayon / 10, 0, math.pi * 2, true);
ctx.fill ();
ctx.Restore ();
}
loop = setInterval (function () {
begintag = vrai;
ctx.ClearRect (0, 0, canvas.width, canvas.height);
Taiji (200, 200, 50, math.pi * (angle / nombre) * 2, vrai);
// taiji (350, 350, 50, math.pi * ((count - angle) / count) * 2, false);
angle = (angle + 5)% Count;
}, 50);
</cript> </p> <p> </ body>
</html>