刻度量角器三相电压相序图

原创

于 2021-11-26 16:59:13 发布 · 573 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

该博客展示了如何使用HTML5 Canvas元素创建一个带有刻度、数字和指南线的圆形仪表盘。代码中详细定义了各个部分的样式，包括圆心、内环、外环、刻度线、数字标注等，并提供了绘制虚线圆圈和网格线的函数。通过调整参数，可以定制不同风格的仪表盘。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >









<!DOCTYPE html>
<html>
<head>
    <title>A Dial Showing the Degrees of a Circle</title>

    <style>
      body {
         background: #eeeeee;
      }

      #canvas {
         background: #ffffff;
         cursor: crosshair;
         margin-left: 10px;
         margin-top: 10px;
         -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
         -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
         box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
      }

    </style>
  </head>

   <body>
      <canvas id='canvas' width='850' height='650'>
         Canvas not supported
      </canvas>

    <script >
    
    var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    //圆心
    CENTROID_RADIUS = 2,
    CENTROID_STROKE_STYLE = 'rgba(0, 0, 0, 0.9)',
    CENTROID_FILL_STYLE   = 'rgba(80, 190, 240, 0.6)',

    RING_INNER_RADIUS = 150,
    RING_OUTER_RADIUS = 80,

    ANNOTATIONS_FILL_STYLE = 'rgba(0, 0, 230, 0.9)',//数字填充样式
    ANNOTATIONS_TEXT_SIZE = 12,

    TICK_WIDTH = 10,
    TICK_LONG_STROKE_STYLE = 'rgba(100, 140, 230, 0.9)',
    TICK_SHORT_STROKE_STYLE = 'rgba(100, 140, 230, 0.7)',

    TRACKING_DIAL_STROKING_STYLE = 'rgba(100, 140, 230, 0.5)'