h5 Canvas圆弧与圆形的绘制

向右看齐 2022-03-16 12:46 438阅读 0赞

圆和圆弧是图形中基本图形之一.在Canvas中，CanvasRenderingContext2D对象提供了两个方法（arc()和arcTo()）来绘制圆和圆弧。

##### JavaScript中弧度角度换算 #####

仅难了解角度和弧度之间的关系是不够的，我们还需要知道怎么使用JavaScript来实现角度和弧度之间的换算。一个π大约是3.141592653589793，在JavaScript中对应的是Math.PI。那么角度和弧度之间的换算：

> rad = (Math.PI \* deg) / 180

同样的：

> deg = (rad \* 180) / Math.PI

为了方便计算和使用，可以将其封装成JavaScript函数：

function getRads (degrees) {
        return (Math.PI * degrees) / 180;
    }
    
    function getDegrees (rads) {
        return (rads * 180) / Math.PI;
    }

比如我们要将30deg转换成rad，可以直接使用：

getRads(30); // 0.5235987755982988rad
    getDegrees(0.7853981633974483); // 45deg

##### arc() #####

定义和用法

> arc() 方法创建弧/曲线（用于创建圆或部分圆）。

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2\*Math.PI。  
提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

JavaScript 语法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数值描述

<table> 
 <thead> 
  <tr> 
   <th>参数值</th> 
   <th>意义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>圆的中心的 x 坐标。</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>圆的中心的 y 坐标。</td> 
  </tr> 
  <tr> 
   <td>r</td> 
   <td>圆的半径。</td> 
  </tr> 
  <tr> 
   <td>sAngle</td> 
   <td>起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。</td> 
  </tr> 
  <tr> 
   <td>eAngle</td> 
   <td>结束角，以弧度计。</td> 
  </tr> 
  <tr> 
   <td>counterclockwise</td> 
   <td>可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70]  
那么,我们就来绘制简单的圆弧

<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>a sample canvas example</title>
        <style> body{ background: #dddddd; } #canvas { margin: 10px; padding: 10px; background: #ffffff; border: thin inset #aaaaaa; } </style>
      </head>
      <body>
        <canvas id="canvas" width="500" height="500">
          canvas not supported
        </canvas>
        <script src="h5Line.js"></script>
      </body>
    </html>

js代码如下

const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    
    function drawArc(color, lineWidth, stepX, stepY, stepR, startAngle, endAngle) { 
      context.strokeStyle = color;
      context.lineWidth = lineWidth;
      context.beginPath();
      context.arc(stepX, stepY, stepR, startAngle, endAngle);
      context.stroke();
    }
    
    drawArc('#ffa480', 0.5, 80, 100, 50, 0, 1 * Math.PI);
    drawArc('#f0048f', 0.5, 200, 100, 40, 0, 2 * Math.PI);
    drawArc('#f0048a', 0.5, 320, 100, 30, 0, 0.5 * Math.PI);

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center]

特别注意：  
使用arc()绘制图形时，如果没有设置moveTo()那么会从圆弧的开始的点（startRad处）作为起始点。如果设置了moveTo()，那么该点会连线到圆弧起始点。  
如果使用stroke()方法，那么会从开始连线到圆弧的起始位置。 如果是 fill 方法, 会自动闭合路径填充.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 1][]

##### arcTo() #####

除了arc方法之外,Canvas还提供了arcTo方法  
定义和用法

> arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。

提示：请使用 stroke() 方法在画布上绘制确切的弧。

JavaScript 语法：

context.fillRect(x1,y1,x2,y2,r);

参数值描述

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>意义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x1</td> 
   <td>弧的起点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y1</td> 
   <td>弧的起点的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>x2</td> 
   <td>弧的终点的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y2</td> 
   <td>弧的终点的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>r</td> 
   <td>弧的半径</td> 
  </tr> 
 </tbody> 
</table>

##### 总结 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70]: /images/20220316/6d1fa2a577514b2cbffcc05e3cfd3cb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center]: /images/20220316/aa08770b194a4d098d5585c4b245803d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 1]: /images/20220316/7338e6ec6db040d2b1734424ff83d120.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70 2]: /images/20220316/03f3103427264a7c8f0577aa3094778e.png