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>

    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    算法:基于分布的排序算法
    剑指offer:镜像二叉树
    算法:基于比较的排序算法
    LeetCode做题笔记-135
    初识YOLO
    PHP课设图览
    浅谈C语言整型与浮点型转换
    SQL Server EXPRESS 安装
    2020CCPC 东北四省(区域)赛题目一览
    2020CCPC 黑龙江省赛题目一览
  • 原文地址:https://www.cnblogs.com/baixc/p/4834671.html
Copyright © 2011-2022 走看看