阅读量:0
1. 示例一：旋转的矩形，``旋转太极图 旋转圆形
html，，，，，，Your browser does not support the HTML5 canvas tag.，，，var c = document.getElementById("myCanvas");，var ctx = c.getContext("2d");，ctx.fillStyle = "#FF0000";，ctx.fillRect(50, 20, 100, 50);，ctx.clearRect(50, 20, 100, 50);，ctx.save();，ctx.translate(100, 50);，ctx.rotate((Math.PI / 180) * 45);，ctx.translate(100, 50);，ctx.fillRect(50, 20, 100, 50);，，，，，`，，2. 示例二：旋转的太极图效果，`html，，，，，，Your browser does not support the HTML5 canvas tag.，，，var c = document.getElementById("myCanvas");，var ctx = c.getContext("2d");，ctx.beginPath();，ctx.arc(100, 50, 50, 0, 2 * Math.PI);，ctx.stroke();，ctx.fillStyle = 'white';，ctx.beginPath();，ctx.moveTo(70.71067811865476, 29.289321881345254);，ctx.bezierCurveTo(70.71067811865476, 0, 129.28932188134525, 0, 129.28932188134525, 29.289321881345254);，ctx.bezierCurveTo(188.4395476989748, 58.578643762695216, 251.5604523019553, 117.1572875253357, 129.28932188134525, 170.71067811865476);，ctx.bezierCurveTo(129.28932188134525, 224.24271247466423, 70.71067811865476, 282.84271247466423, 70.71067811865476, 170.71067811865476);，ctx.bezierCurveTo(18.43954769897475, 117.1572875253357, 30.71067811865477, 58.578643762695216, 70.71067811865476, 29.289321881345254);，ctx.bezierCurveTo(30.71067811865477, 0, 70.71067811865476, 0, 70.71067811865476, 29.289321881345254);，ctx.closePath();，ctx.fill();，，，，，``旋转动画的2个代码例子
1. 旋转的太极图效果
代码示例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <title>Rotating Tai Chi Pattern</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="taichiCanvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById('taichiCanvas'); const ctx = canvas.getContext('2d'); let angle = 0; function drawTaiChi() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(angle * Math.PI / 180); ctx.beginPath(); ctx.arc(0, 50, 50, 0, Math.PI * 2); ctx.fillStyle = 'black'; ctx.fill(); ctx.arc(0, 50, 50, 0, Math.PI * 2); ctx.fillStyle = 'white'; ctx.fill(); ctx.restore(); angle += 1; requestAnimationFrame(drawTaiChi); } drawTaiChi(); </script> </body> </html>代码示例2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <title>Rotating Tai Chi Pattern</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="taichiCanvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById('taichiCanvas'); const ctx = canvas.getContext('2d'); let angle = 0; function drawTaiChi() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(angle * Math.PI / 180); ctx.beginPath(); ctx.arc(0, 50, 50, 0, Math.PI * 2); ctx.fillStyle = 'black'; ctx.fill(); ctx.arc(0, 50, 50, 0, Math.PI * 2); ctx.fillStyle = 'white'; ctx.fill(); ctx.restore(); angle += 1; setTimeout(drawTaiChi, 16); // approx 60fps } drawTaiChi(); </script> </body> </html>FAQs:
Q1: 如何修改旋转速度？
A1: 在上述代码中，可以通过调整angle += 1;这一行中的数值来改变旋转速度，增加这个值会使旋转更快，减少这个值会使旋转更慢，将其改为angle += 2;将使旋转速度加倍。
Q2: 如何改变太极图的颜色？
A2: 要改变太极图的颜色，可以修改以下两行代码中的fillStyle属性的值：
ctx.fillStyle = 'black'; // 黑色部分的颜色 ctx.fillStyle = 'white'; // 白色部分的颜色
你可以使用任何有效的CSS颜色值，如十六进制颜色、RGB颜色或颜色名称，要将黑色部分改为红色，可以将第一行更改为ctx.fillStyle = 'red';。
### 例子1：旋转的太极图效果
#### HTML
```html
```
#### CSS
```css
/* CSS 可以根据需要添加，这里没有特别的要求 */
```
#### JavaScript (taichi.js)
```javascript
window.onload = function() {
var canvas = document.getElementById('taichiCanvas');
var ctx = canvas.getContext('2d');
var angle = 0;
var speed = 0.01;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle);
ctx.beginPath();
ctx.arc(0, 0, 100, 0, Math.PI, false); // 白色部分
ctx.fillStyle = 'white';
ctx.fill();
ctx.beginPath();
ctx.arc(0, 0, 100, 0, Math.PI, true); // 黑色部分
ctx.fillStyle = 'black';
ctx.fill();
ctx.restore();
angle += speed;
if (angle >= 2 * Math.PI) {
angle = 0;
}
requestAnimationFrame(draw);
}
draw();
};
```
### 例子2：旋转的圆形效果
#### HTML
```html
```
#### CSS
```css
/* CSS 可以根据需要添加，这里没有特别的要求 */
```
#### JavaScript (circle.js)
```javascript
window.onload = function() {
var canvas = document.getElementById('circleCanvas');
var ctx = canvas.getContext('2d');
var angle = 0;
var speed = 0.01;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, angle, false);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();
angle += speed;
if (angle >= 2 * Math.PI) {
angle = 0;
}
requestAnimationFrame(draw);
}
draw();
};
```
代码展示了如何使用HTML5 Canvas来实现旋转动画效果，第一个例子是旋转的太极图，第二个例子是旋转的圆形，通过`requestAnimationFrame`函数，我们可以创建平滑的动画效果。
