<スクリプトタイプ="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);
スクリプト>