blog

Canvas之一 旋转的太极

今天看到了康威生命游戏，有点小激动，想自己用javascript实现一个。本来想用表格的方式着色去做，但是又看到了已经有人通过HTML5的canvas完成了，代码都公布出来了HTML5版本的生命游戏，而且下下来就能运行。。然后就想着我可以做个更好的，但是不会canvas怎么办？学呗！经常知识栈溢出的我就是这么任性。

在寻找好的学习资料的道路上又遇到了阮一峰大神，他还是我的校友你敢信？真是学习的榜样啊！一个好的Canvas API学习文档。

然后就这么折腾了一小会儿，写了个简单的旋转的太极图。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
    您的浏览器不支持canvas！
</canvas>
</body>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var height = 400;
    var width = 400;
    /*
     ctx.beginPath(); // 开始路径绘制
     ctx.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
     ctx.lineTo(200, 20); // 绘制一条到(200,20)的直线
     ctx.lineTo(200, 100);
     ctx.lineTo(20, 100);
     ctx.closePath();
     ctx.lineWidth = 1.0; // 设置线宽
     ctx.strokeStyle = "#CC0000"; // 设置线的颜色
     ctx.stroke(); // 进行线的着色，这时整条线才变得可见
     ctx.fillStyle = 'yellow';   // 设置矩形的填充色
     ctx.fillRect(50, 50, 200, 100); // 绘制一个有填充色的矩形
     ctx.strokeRect(10, 10, 200, 100);  // 透明矩形
     ctx.clearRect(100, 50, 50, 50);    // 清楚对应位置矩形区域
     // 设置字体
     ctx.font = "Bold 20px Arial";
     // 设置对齐方式
     ctx.textAlign = "left";
     // 设置填充颜色
     ctx.fillStyle = "#008600";
     // 设置字体内容，以及在画布上的位置， 不支持文本断行
     ctx.fillText("Hello!", 10, 50);
     // 绘制空心字， 不支持文本断行
     ctx.strokeText("Hello!", 10, 100);
     // 清空画布
     ctx.clearRect(0, 0, 400, 200);
     // 绘制圆和扇形
     ctx.beginPath();
     ctx.arc(60, 60, 50, 0, Math.PI, true);
     ctx.fillStyle = "#000000";
     ctx.fill();
     // 绘制空心圆
     ctx.beginPath();
     ctx.arc(60, 60, 50, 0, Math.PI * 2, true);
     ctx.lineWidth = 1.0;
     ctx.strokeStyle = "#000";
     ctx.stroke();
     // 根据上边画出来的，绘制一个太极图
     ctx.beginPath();
     ctx.arc(35, 60, 25, 0, Math.PI * 2, true);
     ctx.fillStyle = "#ffffff";
     ctx.fill();
     ctx.beginPath();
     ctx.arc(85, 60, 25, 0, Math.PI * 2, true);
     ctx.fillStyle = "#000000";
     ctx.fill();
     ctx.beginPath();
     ctx.arc(35, 60, 8, 0, Math.PI * 2, true);
     ctx.fillStyle = "#000000";
     ctx.fill();
     ctx.beginPath();
     ctx.arc(85, 60, 8, 0, Math.PI * 2, true);
     ctx.fillStyle = "#ffffff";
     ctx.fill();
     // 设置渐变色
     var myGradient = ctx.createLinearGradient(0, 0, 0, 160);
     myGradient.addColorStop(0, "#BABABA");
     myGradient.addColorStop(1, "#636363");
     ctx.fillStyle = myGradient;
     ctx.fillRect(10,10,200,100);
     // 设置阴影
     ctx.shadowOffsetX = 10; // 设置水平位移
     ctx.shadowOffsetY = 10; // 设置垂直位移
     ctx.shadowBlur = 5; // 设置模糊度
     ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色
     ctx.fillStyle = "#CC0000";
     ctx.fillRect(10,10,200,100);
     */

    // 设置坐标原点
    ctx.translate(width / 2, height / 2);

    // 做一个旋转的太极图
    setInterval(function () {
        // 清空画布
        ctx.clearRect(-width / 2, height / 2, width / 2, -height / 2);
        // 旋转画布
        ctx.rotate(Math.PI / 20);
        // 绘制圆的轮廓
        ctx.beginPath();
        ctx.arc(0, 0, 50, 0, Math.PI * 2, true);
        ctx.lineWidth = 2.0;
        ctx.strokeStyle = "#000";
        ctx.stroke();
        // 画个黑圆
        ctx.beginPath();
        ctx.arc(0, 0, 50, 0, Math.PI, true);
        ctx.fillStyle = "#000000";
        ctx.fill();
        // 画个白圆
        ctx.beginPath();
        ctx.arc(0, 0, 50, Math.PI, Math.PI * 2, true);
        ctx.fillStyle = "#ffffff";
        ctx.fill();
        // 根据上边画出来的，绘制一个太极图
        ctx.beginPath();
        ctx.arc(-25, 0, 25, 0, Math.PI * 2, true);
        ctx.fillStyle = "#ffffff";
        ctx.fill();
        ctx.beginPath();
        ctx.arc(25, 0, 25, 0, Math.PI * 2, true);
        ctx.fillStyle = "#000000";
        ctx.fill();
        ctx.beginPath();
        ctx.arc(-25, 0, 8, 0, Math.PI * 2, true);
        ctx.fillStyle = "#000000";
        ctx.fill();
        ctx.beginPath();
        ctx.arc(25, 0, 8, 0, Math.PI * 2, true);
        ctx.fillStyle = "#ffffff";
        ctx.fill();
    }, 50);
</script>
</html>

如下为效果图： <canvas id="myCanvas" width="400" height="400"> 您的浏览器不支持canvas！ </canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var height = 400; var width = 400;

// 设置坐标原点
ctx.translate(width / 2, height / 2);

// 做一个旋转的太极图
setInterval(function () {
    // 清空画布
    ctx.clearRect(-width / 2, height / 2, width / 2, -height / 2);
    // 旋转画布
    ctx.rotate(Math.PI / 20);
    // 绘制圆的轮廓
    ctx.beginPath();
    ctx.arc(0, 0, 50, 0, Math.PI * 2, true);
    ctx.lineWidth = 2.0;
    ctx.strokeStyle = "#000";
    ctx.stroke();
    // 画个黑圆
    ctx.beginPath();
    ctx.arc(0, 0, 50, 0, Math.PI, true);
    ctx.fillStyle = "#000000";
    ctx.fill();
    // 画个白圆
    ctx.beginPath();
    ctx.arc(0, 0, 50, Math.PI, Math.PI * 2, true);
    ctx.fillStyle = "#ffffff";
    ctx.fill();
    // 根据上边画出来的，绘制一个太极图
    ctx.beginPath();
    ctx.arc(-25, 0, 25, 0, Math.PI * 2, true);
    ctx.fillStyle = "#ffffff";
    ctx.fill();
    ctx.beginPath();
    ctx.arc(25, 0, 25, 0, Math.PI * 2, true);
    ctx.fillStyle = "#000000";
    ctx.fill();
    ctx.beginPath();
    ctx.arc(-25, 0, 8, 0, Math.PI * 2, true);
    ctx.fillStyle = "#000000";
    ctx.fill();
    ctx.beginPath();
    ctx.arc(25, 0, 8, 0, Math.PI * 2, true);
    ctx.fillStyle = "#ffffff";
    ctx.fill();
}, 50);

</script>