HTML5 Canvas旋轉動畫的2個程式碼範例（一個旋轉的太極圖效果）_html5教學技巧

效果圖：

方法一：

複製程式碼

程式碼如下：

程式碼如下：

>

您的瀏覽器不支援canvas標籤

變數度 = 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 = "紅色";

var px =Math.sin(deg)*r;
var py =Math.cos(deg)*r;
上下文.clearRect(0, 0, 300, 300);
上下文.beginPath();
context.fillStyle = colorA;
context.arc(rl, rl, 60, 0.5 * Math.PI 度, 1.5 * Math.PI 度, true);
context.closePath();
上下文.fill();
context.fillStyle = colorB;
上下文.beginPath();
context.arc(rl, rl, 60, 1.5* Math.PI 度, 0.5 * Math.PI 度, true);
context.closePath();
上下文.fill();
context.fillStyle = colorB;
上下文.beginPath();
context.arc(rl px, rl-py, 30, 0.5 * Math.PI 度, 1.5 * Math.PI 度, true);
context.closePath();
上下文.fill();
context.fillStyle = colorA;
上下文.beginPath();
context.arc(rl-px, rl py, 30, 1.5 * Math.PI 度, 0.5 * Math.PI 度, true);
context.closePath();
上下文.fill();
context.fillStyle = colorA;
上下文.beginPath();
context.arc(rl px, rl-py, 8, 0, 2 * Math.PI, true);
context.closePath();
上下文.fill();
context.fillStyle = colorB;
上下文.beginPath();
context.arc(rl-px, rl py, 8, 0, 2 * Math.PI, true);
context.closePath();
上下文.fill();
度=0.1；
}

setInterval(drawTaiji, 100); 腳本>