zoukankan      html  css  js  c++  java
  • 16-canvas绘制圆弧

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>16-Canvas绘制圆弧</title>
     6     <style>
     7         *{
     8             margin: 0;
     9             padding: 0;
    10         }
    11         canvas{
    12             display: block;
    13             margin: 0 auto;
    14             background: red;
    15         }
    16     </style>
    17 </head>
    18 <body>
    19 <canvas width="500" height="400"></canvas>
    20 <script>
    21     /*
    22     1.基本概念
    23     角度: 一个圆360度, 一个半圆是180度
    24     弧度: 一个圆2π, 一个半圆π
    25 
    26     2.角度转换弧度公式:
    27     ∵ 180角度 = π弧度
    28     ∴ 1角度 = π/180;
    29     ∴ 弧度 = 角度 * π/180;
    30        90角度 * π/180 = π/2
    31 
    32     3.弧度转换角度公式:
    33     ∵ π弧度 = 180角度
    34     ∴ 1弧度 = 180/π
    35     ∴ 角度 = 弧度 * 180/π
    36        π/2 * 180/π = 180/2 = 90度
    37     * */
    38     // 1.拿到canvas
    39     let oCanvas = document.querySelector("canvas");
    40     // 2.从canvas中拿到绘图工具
    41     let oCtx = oCanvas.getContext("2d");
    42     /*
    43     x, y: 确定圆心
    44     radius: 确定半径
    45     startAngle: 确定开始的弧度   (0代表的是3点钟那个位置的点)
    46     endAngle: 确定结束的弧度
    47     Boolean: 默认是false, false就是顺时针绘制, true就是逆时针绘制
    48     context.arc(x, y, radius, startAngle, endAngle, Boolean);
    49     * */
    50     oCtx.arc(100, 100, 100, 0, Math.PI);
    51     // oCtx.arc(100, 100, 100, 0, Math.PI, true);
    52     // oCtx.arc(100, 100, 100, 0, Math.PI * 2);
    53     oCtx.stroke();
    54 </script>
    55 </body>
    56 </html>
  • 相关阅读:
    ubuntu下安装maven
    159.Longest Substring with At Most Two Distinct Characters
    156.Binary Tree Upside Down
    155.Min Stack
    154.Find Minimum in Rotated Sorted Array II
    153.Find Minimum in Rotated Sorted Array
    152.Maximum Product Subarray
    151.Reverse Words in a String
    150.Evaluate Reverse Polish Notation
    149.Max Points on a Line
  • 原文地址:https://www.cnblogs.com/gsq1998/p/12166133.html
Copyright © 2011-2022 走看看