HTML5 キャンバス回転アニメーション (回転太極拳エフェクト) の 2 つのコード例_html5 チュートリアル スキル

效果图：

方法一：

复制代码

代码如下:

お使いのブラウザは Canvas タグをサポートしていません
<スクリプトタイプ="text/javascript">
変数度 = 0;
var r = 30;
var rl = 100;
functiondrawTaiji() {
var Canvas = document.getElementById('myCanvas');
var context = Canvas.getContext('2d');
var colorA = "rgb(0, 0, 0)";
var colorB = "赤";

var px =Math.sin(度)*r;
var py =Math.cos(度)*r;
context.clearRect(0, 0, 300, 300);
context.beginPath();
context.fillStyle = colorA;
context.arc(rl, rl, 60, 0.5 * Math.PI 度, 1.5 * Math.PI 度, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl, rl, 60, 1.5* Math.PI 度, 0.5 * Math.PI 度, true);
context.closePath();
context.fill();
context.fillStyle = colorB;
context.beginPath();
context.arc(rl px, rl-py, 30, 0.5 * Math.PI 度, 1.5 * Math.PI 度, true);
context.closePath();
context.fill();
context.fillStyle = colorA;
context.beginPath();
context.arc(rl-px, rl py, 30, 1.5 * Math.PI 度, 0.5 * Math.PI 度, 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);

方法二：

复制代

代码如下:

お使いのブラウザは Canvas タグ をサポートしていません。
<スクリプトタイプ="text/javascript">
var Canvas = document.getElementById('myCanvas');
var ctx = Canvas.getContext("2d");
変数角度 = 0;
変数数 = 360;
var clrA = '#000';
var clrB = '赤';

関数 taiji(x, y, 半径, 角度, ワイズ) {
角度角度 = 角度 || 0;
賢い＝賢い？ 1 : -1;
ctx.save();
ctx.translate(x, y);
ctx.rotate(角度);
ctx.fillStyle = clrA;
ctx.beginPath();
ctx.arc(0, 0, 半径, 0, Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrB;
ctx.arc(0, 0, 半径, 0, Math.PI, false);
ctx.fill();
ctx.fillStyle = clrB;
ctx.beginPath();
ctx.arc(wise * -0.5 * 半径, 0, 半径 / 2, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrA;
ctx.arc(wise * 0.5 * 半径, 0, 半径 / 2, 0, Math.PI * 2, false);
ctx.arc(wise * -0.5 * 半径, 0, 半径 / 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrB;
ctx.arc(wise * 0.5 * 半径, 0, 半径 / 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.restore();
}

ループ = setInterval(function () {
beginTag = true;
ctx.clearRect(0, 0, Canvas.width, Canvas.height);
taiji(200, 200, 50, Math.PI * (角度 / カウント) * 2, true);
//taiji(350, 350, 50, Math.PI * ((カウント - 角度) / カウント) * 2, false);
角度 = (角度 5) % カウント;
}, 50);