Комментарий: В этой статье в основном представлены два примера кода анимации вращения холста HTML5 и реализует вращающийся эффект диаграммы Tai Chi. Друзья, которые изучают анимацию ротации HTML5, могут ссылаться на это.
Изображение воспроизведения:
Метод 1:
<html>
<тело>
<canvas> y браузер не поддерживает тег Canvas </canvas>
<script type = "text/javascript">
var deg = 0;
var r = 30;
var rl = 100;
Функция traittaiji () {
var canvas = document.getElementbyId ('myCanvas');
var context = canvas.getContext ('2d');
var colora = "rgb (0, 0, 0)";
var colorb = "red";
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 ();
град += 0,1;
}
SetInterval (Drawtaiji, 100);
</script> </p> <p> </body>
</html>
Метод 2:
<! Doctype html>
<html>
<тело>
<canvas> Ваш браузер не поддерживает тег Canvas </canvas>
<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 = 'red';
Функция Тайджи (x, Y, радиус, угол, мудрый) {
angleangle = angle || 0;
мудрый = мудрый? 1: -1;
ctx.save ();
ctx.translate (x, y);
ctx.rotate (угол);
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 (мудрый * -0,5 * радиус, 0, радиус / 2, 0, математика. * 2, верно);
ctx.fill ();
ctx.beginpath ();
ctx.fillstyle = clra;
ctx.arc (мудрый * +0,5 * радиус, 0, радиус / 2, 0, математика.pi * 2, false);
ctx.arc (мудрый * -0,5 * радиус, 0, радиус / 10, 0, Math.pi * 2, true);
ctx.fill ();
ctx.beginpath ();
ctx.fillstyle = clrb;
ctx.arc (мудрый * +0,5 * радиус, 0, радиус / 10, 0, Math.pi * 2, true);
ctx.fill ();
ctx.restore ();
}
loop = setInterval (function () {
begintag = true;
ctx.clearrect (0, 0, canvas.width, canvas.height);
Тайцзи (200, 200, 50, математика. Pi * (угол / count) * 2, true);
// taiji (350, 350, 50, math.pi * ((count - angle) /count) * 2, false);
Угол = (угол + 5) % подсчет;
}, 50);
</script> </p> <p> </body>
</html>