コメント：この記事では、主にHTML5キャンバス回転アニメーションの2つのコード例を紹介し、回転する太極拳効果を実現します。 HTML5 Canvas Rotationアニメーションを学ぶ友人はそれを参照できます。
複製画像：
方法1：
<html>
<body>
<Canvas> YブラウザはCanvasタグ</canvas>をサポートしていません
<script type = "text/javascript">
var deg = 0;
var r = 30;
var rl = 100;
関数drawtaiji（）{
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（）;
deg += 0.1;
}
setinterval（drawtaiji、100）;
</script> </p> <p> </body>
</html>
方法2：
<！doctype html>
<html>
<body>
<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';
関数Taiji（x、y、radius、angle、wise）{
Angleangle = Angle || 0;
WiseWise =賢明？ 1：-1;
ctx.save（）;
ctx.translate（x、y）;
ctx.rotate（angle）;
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 * radius、0、radius / 2、0、math.pi * 2、true）;
ctx.fill（）;
ctx.beginpath（）;
ctx.fillstyle = clra;
ctx.arc（wise * +0.5 * radius、0、radius / 2、0、math.pi * 2、false）;
ctx.arc（wise * -0.5 * radius、0、radius / 10、0、math.pi * 2、true）;
ctx.fill（）;
ctx.beginpath（）;
ctx.fillstyle = clrb;
ctx.arc（wise * +0.5 * radius、0、radius / 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 *（angle / count） * 2、true）;
// Taiji（350、350、50、Math.pi *（（count -angle） /count） * 2、false）;
角度=（角度 + 5）％カウント;
}、50）;
</script> </p> <p> </body>
</html>