07绘制奥运五环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制奥运五环</title>
</head>
<body style="padding: 100px;">
  <canvas id="canvas" width="900" height="600" style="border:1px solid #000"></canvas>

<script>
     // 1. 获取标签
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    // 2. 绘制奥运五环
    var colorArr = ["red", "blue", "yellow", "purple", "black"];
    for(var i=0; i<colorArr.length; i++){
        ctx.beginPath();
        ctx.arc((i+1) * 100, 150, 80, 0, 2 * Math.PI);
        ctx.strokeStyle = colorArr[i]; // 设置颜色
        ctx.lineWidth = 6;
        ctx.stroke();
    }

     for(var i=0; i<colorArr.length; i++){
         ctx.beginPath();
         if(i < 3){
             ctx.arc((i+1) * 100, 350, 80, 0, 2 * Math.PI);
         }else {
             ctx.arc((i-2) * 100 + 50, 430, 80, 0, 2 * Math.PI);
         }
         ctx.strokeStyle = colorArr[i]; // 设置颜色
         ctx.lineWidth = 6;
         ctx.stroke();
     }
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容