zoukankan      html  css  js  c++  java
  • canvas 画圆

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    </head>
    <body>
      <canvas id="canvas" style="border:1px solid #ccc;display:block;">
        当前浏览器不支持canvas,请更换浏览器后在试。
      </canvas>
    
    <script>
      window.onload = function () {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
    
        canvas.width = 1200;
        canvas.height = 800;
    
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        for (var i = 0; i < 10; i++) {
          context.beginPath();
          context.arc(50 + i * 100, 60, 40, 0 , 0.2 * (i + 1) * Math.PI);
          // context.arc(圆心x轴坐标,圆心y轴坐标,半径,起始点,终点,[顺时针/逆时针,true为逆时针,默认为false]);
          context.closePath();
          context.stroke();
        };
    
        for (var i = 0; i < 10; i++) {
          context.beginPath();
          context.arc(50 + i * 100, 200, 40, 0 , 0.2 * (i + 1) * Math.PI);
          context.stroke();
        };
    
        for (var i = 0; i < 10; i++) {
          context.beginPath();
          context.arc(50 + i * 100, 400, 40, 0 , 0.2 * (i + 1) * Math.PI, true);
          context.closePath();
          context.stroke();
        };
    
        context.fillStyle = 'orange';
        for (var i = 0; i < 10; i++) {
          context.beginPath();
          context.arc(50 + i * 100, 600, 40, 0 , 0.2 * (i + 1) * Math.PI, true);
          context.stroke();
          context.fill();
        };
    
      }
    </script>
    </body>
    </html>

    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    java第十三周作业
    java第十三周随堂
    安卓作业
    5.29 第十三周作业
    5.28第十三周上机练习
    5.22第十二周作业
    5.21第十二章上机练习
    5.15 第十一周作业
    5.14 第十一周 上机练习
    5.7第十周上机练习
  • 原文地址:https://www.cnblogs.com/baixc/p/4834671.html
Copyright © 2011-2022 走看看