效果图: 方法一: 复制代码代码如下: Ihr Browser unterstützt das Canvas-Tag nicht <br> var Grad = 0; <br> var r = 30; <br> var rl = 100; <br> Funktion drawTaiji() { <br> var canvas = document.getElementById('myCanvas'); <br> var context = canvas.getContext('2d'); <br> var colorA = "rgb(0, 0, 0)"; <br> var colorB = "rot"; <br> <br> var px =Math.sin(deg)*r; <br> var py =Math.cos(deg)*r; <br> context.clearRect(0, 0, 300, 300); <br> context.beginPath(); <br> context.fillStyle = colorA; <br> context.arc(rl, rl, 60, 0,5 * Math.PI deg, 1,5 * Math.PI deg, true); <br> context.closePath(); <br> context.fill(); <br> context.fillStyle = colorB; <br> context.beginPath(); <br> context.arc(rl, rl, 60, 1.5* Math.PI deg, 0.5 * Math.PI deg, true); <br> context.closePath(); <br> context.fill(); <br> context.fillStyle = colorB; <br> context.beginPath(); <br> context.arc(rl px, rl-py, 30, 0.5 * Math.PI deg, 1.5 * Math.PI deg, true); <br> context.closePath(); <br> context.fill(); <br> context.fillStyle = colorA; <br> context.beginPath(); <br> context.arc(rl-px, rl py, 30, 1.5 * Math.PI deg, 0.5 * Math.PI deg, true); <br> context.closePath(); <br> context.fill(); <br> context.fillStyle = colorA; <br> context.beginPath(); <br> context.arc(rl px, rl-py, 8, 0, 2 * Math.PI, true); <br> context.closePath(); <br> context.fill(); <br> context.fillStyle = colorB; <br> context.beginPath(); <br> context.arc(rl-px, rl py, 8, 0, 2 * Math.PI, true); <br> context.closePath(); <br> context.fill(); <br> Grad =0,1; <br> } <br> setInterval(drawTaiji, 100);<br>