上篇 实验
第1章 基础实验
实验1 奥运五环
简介
奥林匹克五环标志是由皮埃尔·德·顾拜旦先生于1913年构思设计的，是由《奥林匹克宪章》确定的，也被称为奥运五环标志，它是世界范围内最为人们广泛认知的奥林匹克运动会标志。它由5个奥林匹克环套接组成，有蓝、黄、黑、绿、红5种颜色。环从左到右互相套接，上面是蓝、黑、红环，下面是黄、绿环。整个造形为一个上方大底部小的规则梯形。五个不同颜色的圆环代表了参加现代奥林匹克运动会的五大洲——欧洲、亚洲、非洲、澳洲和美洲，如图1-1所示。
图1-1 奥林匹克五环
如何在Canvas上绘制出一个一模一样的奥林匹克五环呢？首先从画圆开始。
画圆
在一切实验之前，要先理解Canvas中的坐标系统，假设一个宽是300高是150的Canvas标签，它内部的坐标变化如图1-2所示。
图1-2 Canvas坐标
理解了坐标，开始画圆。CanvasRenderingContext2D对象提供了一组用来在画布上绘制的图形函数。使用CanvasRenderingContext2D.arc来绘制一个圆形。
语法：
arc(x, y, radius, startAngle, endAngle, counterclockwise)
利用该方法，直接在Canvas中画5个圆环。
<canvasid="myCanvas"width="400"height="200"style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<scripttype="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(70, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(160, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(250, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(110, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(200, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
</script>
效果如图1-3所示。
图1-3 简单的黑白五环
可以看到和标准的奥林匹克标志相比，圆环宽度不够，而且不是彩色的，所以要设置CanvasRenderingContext2D的属性来绘制更加逼真的圆环。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=5;
ctx.strokeStyle="#163B62";
ctx.beginPath();
ctx.arc(70, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.arc(160, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#BF0628";
ctx.beginPath();
ctx.arc(250, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#EBC41F";
ctx.beginPath();
ctx.arc(110, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#198E4A";
ctx.beginPath();
ctx.arc(200, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
效果如图1-4所示。
图1-4不嵌套的彩色五环
现在基本上已经和奥林匹克标志差不多了。可是细心的读者会发现，后画的圆形会覆盖在先画的圆形上面，这样就失去了环环相扣的感觉，那么如何环环相扣呢？现在就要学习画弧。
画弧
可以通过画弧来重新覆盖应被覆盖的部分，以实现环环相扣的视觉效果。
在画弧之前，先回到CanvasRenderingContext2D的arc方法。
arc(x, y, radius, startAngle, endAngle, counterclockwise)
以上代码中各参数的意义如表1-1所示。
表1-1 各参数的意义
如图1-5所示，更加形象化地表示了每个参数的意义。
图1-5 弧的各项参数
那么，需要怎样的一张图像盖在上面才能实现环环相扣的效果呢？如图1-6所示。
图1-6画弧
通过下面的代码实现上面3段弧形：
ctx.strokeStyle="#163B62";
ctx.beginPath();
ctx.arc(70, 70, 40, Math.PI * 1.9, Math.PI * 2.1, false);
ctx.stroke();
ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.arc(160, 70, 40, Math.PI * 0.9, Math.PI * 2.1, false);
ctx.stroke();
ctx.strokeStyle="#BF0628";
ctx.beginPath();
ctx.arc(250, 70, 40, Math.PI * 0.9, Math.PI * 1.1, false);
ctx.stroke();
把上面画圆的代码和画弧的代码合起来，顺序是先画圆，后画弧，弧就会盖在圆的上面。完整的代码如下：
<canvasid="myCanvas"width="400"height="200"style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<scripttype="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=5; \注：设置圆环的宽度\
ctx.strokeStyle="#163B62"; \注：设置圆环的颜色\
ctx.beginPath();
ctx.arc(70, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.arc(160, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#BF0628";
ctx.beginPath();
ctx.arc(250, 70, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#EBC41F";
ctx.beginPath();
ctx.arc(110, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#198E4A";
ctx.beginPath();
ctx.arc(200, 110, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.strokeStyle="#163B62"; \注：从这里开始，下面是画弧\
ctx.beginPath();
ctx.arc(70, 70, 40, Math.PI * 1.9, Math.PI * 2.1, false);
ctx.stroke();
ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.arc(160, 70, 40, Math.PI * 0.9, Math.PI * 2.1, false);
ctx.stroke();
ctx.strokeStyle="#BF0628";
ctx.beginPath();
ctx.arc(250, 70, 40, Math.PI * 0.9, Math.PI * 1.1, false);
ctx.stroke();
</script>
运行效果如图1-7所示。
图1-7 奥林匹克五环
就这样，实现了奥林匹克五环的环环相扣。其实CanvasRenderingContext2D不仅可以画空心圆，也可以画实心圆，下一个实验就会用到它相关的API。