canvas写仪表盘

最新推荐文章于 2025-03-28 23:06:43 发布

原创

最新推荐文章于 2025-03-28 23:06:43 发布

· 3.8k 阅读

10 ·

版权

这篇博客详细介绍了如何使用HTML5的canvas元素来创建仪表盘。通过JavaScript计算角度与功率的关系，例如90度对应210瓦，1度等于90/210=3/7。此外，还探讨了不同功率范围对应的角度转换，如0-50瓦对应150度的情况。

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

electricity.html

<!DOCTYPE>
<html>
<head>
    <title>电压电流表</title>
    <meta charset="utf-8" />
    <!-- 引入css样式表 -->
    <link rel="stylesheet" type="text/css" href="css/electricity.css" />
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style>
        #meter_canvas1,  #meter_canvas2, #meter_canvas3, #meter_canvas4, #meter_canvas5, #meter_canvas6{
            background:url('img/hui.png') no-repeat  ;
            background-position:45% 40%;
            background-size:50% 30%;
            z-index:10;
        }
       .reaction{
          position:relative;
      }
        .degrees{
            width:80px;
            height:24px;
            line-height:24px;
            background-color:#59B1F0;
            position:absolute;
            border-radius:15px;
            bottom:26%;
            left:19%;
            z-index:999;
            color:#fff;
            font-family:"Microsoft YaHei";
            font-size:0.875em;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="perimeter">
        <div class="round_box">
            <div class="reaction">
                <canvas id="meter_canvas1" width="300" height="300" > 您的浏览器不支持canvas标签，无法看到表盘  </canvas>
                <div class="degrees" id="degrees1">20W</div>
                <div class="rtbtn">
                    
                    <div class="status">A电流表</div>
                    <img class="img1" src="img/lead.png" />
                    <div class="monitor_result water1" id="water1">180</div>
                    <div class="status">A连接状态</div>
                    <img class="img2" src="img/lead.png"/>
                    <div class="monitor_result" id="monitor_resultA">150</div>
                </div>
            </div>
            <div class="reaction">
                <canvas id="meter_canvas2" width="300" height="300"> 您的浏览器不支持canvas标签，无法看到表盘  </canvas>
                <div class="degrees"  id="degrees1">20W</div>
                <div class="rtbtn">
                    <div class="status">B电流表</div>
                    <img class="img3" src="img/lead.png" />
                    <div class="monitor_result " id="water2">180</div>
                    <div class="status">B连接状态</div>
                    <img class="img4" src="img/lead.png" />
                    <div class="monitor_result">150</div>
                </div>
            </div>
            <div class="reaction">
                <canvas id="meter_canvas3" width="300" height="300">您的浏览器不支持canvas标签，无法看到表盘</canvas>
                <div class="degrees"  id="degrees3">20W</div>
                <div class="rtbtn">
                    <div class="status">C电流表</div>
                    <img class="img5" src="img/lead.png" />
                    <div class="monitor_result " id="water3">180</div>
                    <div class="status">C连接状态</div>
                    <img class="img6" src&#

最低0.47元/天解锁文章