h5 Canvas圆弧与圆形的绘制

Posted 2022-09-06 suwu150

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5 Canvas圆弧与圆形的绘制相关的知识，希望对你有一定的参考价值。

圆和圆弧是图形中基本图形之一.在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);

参数值描述

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

那么,我们就来绘制简单的圆弧

<!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);