JavaScript/01-2d-path.html at master · awayjin/JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
  <title>Title</title>
</head>
<body>
https://www.w3cplus.com/canvas/drawing-arc-and-circle.html
弧度又称弪度，是平面角的单位，也是国际单位制导出单位。单位弧度定义为圆弧长度等于半径时的圆心角。角度以弧度给出时，通常不写弧度单位，或有时记为rad。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。

圆的周长与半径关系：
C = 2 * Math.PI * r
C = Math.PI * d

<canvas id="myCanvas"  height="600" style="background-color: #1f7e9a"></canvas>

<script>
  var canvas = document.createElement('canvas')
  canvas.width = 1000
  canvas.height = 1000
  canvas.style = 'background-color: #999'
  document.body.appendChild(canvas)

  var context = canvas.getContext('2d')
  context.beginPath()
  context.strokeStyle = 'red'
  context.strokeRect(10, 10, 50, 60)
  context.arc(100, 100, 50, 0, 10, false)

  // 绘制圆弧
  context.moveTo(530, 530)
  context.arc(500, 500, 30, 0, Math.PI / 4)
  context.stroke()

  var myCanvas = document.getElementById('myCanvas')
  var ctx = myCanvas.getContext('2d')
  drwaScreen()

  function getRads (degrees) { return (Math.PI * degrees) / 180; }
  function getDegrees (rads) { return (rads * 180) / Math.PI; }
  function drwaScreen () {
    var arc = { x: myCanvas.width / 2, y: myCanvas.height / 2, r: 100 }
    var w = myCanvas.width;
    var h = myCanvas.height;
    ctx.save();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#e3f';

    // startRad => getRads(-45)
    // endRad => getRads(45)
    // 顺时针旋转
    ctx.beginPath(); // 开始路径
    ctx.arc(arc.x, arc.y, arc.r, getRads(-45),getRads(45));
    ctx.closePath()
    ctx.stroke() // 描边路径
//    ctx.fill() // 填充路径

    // startRad => getRads(-135) // endRad => getRads(135) // 逆时针旋转
    ctx.beginPath();
    ctx.strokeStyle = "#f36";
    ctx.arc(arc.x, arc.y, arc.r, getRads(-135), getRads(135), true);
    ctx.stroke();
    ctx.restore()

    console.log(arc.x)
    arc = { x: myCanvas.width / 2, y: myCanvas.height / 2, r: 15 }
//    var w = myCanvas.width, h = myCanvas.height;
//    ctx.save();
//    ctx.lineWidth = 1; ctx.strokeStyle = '#e3f';
    ctx.moveTo(100, 100)
    console.log(arc.x)

    for (var i =0; i < 5; i++) {
      ctx.beginPath(); // 开始路径
      ctx.strokeStyle = 'pink'
      ctx.arc(arc.x, arc.y, arc.r * i, getRads(-45),getRads(45));
      ctx.stroke() // 描边路径

      ctx.beginPath();
      ctx.strokeStyle = "#f36";
      ctx.arc(arc.x, arc.y, arc.r * i, getRads(-135), getRads(135), true);
      ctx.stroke();
    }
  }
</script>


<script>
  class Greeter {
    greeting: string;
    constructor (message: string) {
      this.greeting = message
    }
    greet () {
      return 'Hi, ' + this.greeting
    }
  }

  let g = new Greeter()
  console.log(g.greet())
</script>
</body>
</html>