Html5制作奥运五环

来源：互联网发布：剑灵灵族正太捏脸数据编辑：程序博客网时间：2024/04/29 16:28

使用html5的Canvas制作一个一模一样的奥运五环：

第一步：画圆

在一切实验之前，要先理解Canvas中的坐标系统，假设一个宽是300，高是150的Canvas标签，它内部的坐标变化为，从左上角向下，向右越来越大。

Canvas画圆的语法为:

arc(x,y,radius,startAngle,endAngle,counterclockwise)

利用以上方法，直接在Canvas中画五个圆环。

 <canvas id="myCanvas" style="border: 1px solid #c3c3c3; width: 400px; height: 200px;">  你的浏览器不支持canvas </canvas>

编写脚本如下：

<script type="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>

运行效果如下所示：

可以看到和标准的奥运标志相比，圆环宽度不够，而且不是彩色的，所以要设置Canvas的属性来绘制更加逼真的圆环。

 <script type="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();    </script>

运行效果如下：

现在基本上已经和奥运标志差不多了，可是细心的你会发现，后画的圆会覆盖在先画的圆形上面，这样就失去了环环相扣的感觉，那么如何环环相扣呢？现在将进行下一步：画弧。

第二步：画弧

可以通过画弧来重新覆盖被覆盖的部分，以实现环环相扣的视觉效果。

在画弧之前，先回到Canvas的arc方法。

arc(x,y,radius,startAngle,endAngle,counterclockwise)

以上代码中各参数的意义如下：

参数描述x,y描述弧的圆心的坐标radius描述弧的半径startAngle,endAngle沿着圆指定弧的开始点和结束点的一个角度，这个角度用弧度来衡量，沿着X轴正半轴的三点钟方向的角度为0，角度沿逆时针方向增加counterclockwise弧沿着圆周的逆时针方向（true）还是顺时针方向（false）遍历

通过以下代码实现相关圆弧的覆盖：

        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 type="text/javascript">        var c = document.getElementById("myCanvas2");        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>

运行效果为：

至此，奥运五环就全部制作完成。