Canvas---Canvas绘制钟表，仪表盘

最新推荐文章于 2024-07-02 16:22:07 发布

MIKUScallion

最新推荐文章于 2024-07-02 16:22:07 发布

阅读量6.5k

点赞数 3

分类专栏：源代码文章标签： Canvas javascript web html html5

本文链接：https://blog.csdn.net/mikuscallion/article/details/43276981

版权

本文介绍如何使用HTML5的Canvas API来绘制钟表和仪表盘，包括详细的绘制步骤和代码实现。作者建议在购买《HTML5 Canvas核心技术》一书前先阅读PDF版，以更好地理解Canvas的绘制技巧。示例代码展示了如何创建表盘并为其添加样式。

摘要由CSDN通过智能技术生成

Canvas绘制钟表，仪表盘。

《HTML5 Canvas核心技术》这本书在代码方面，没有丝毫注解，我感觉看的挺费劲，如果你想买书的话，最好还是先下本pdf看看吧。

下面是表盘的绘制图解

函数顺序是按照上图的顺序来写的，最后我为仪表加上了样式。

源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            canvas{
                border: 1px solid black;
                background-color: #fff;
            }
        </style>
    </head>
    <body>
        <canvas  id="canvas" width="500" height="500">
        </canvas>
    </body>
    <script type = "text/javascript">
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        
        var CENTROID_RADIUS = 10,
            CENTROID_STROKE_STYLE = "rgba(0,0,0,0.5)",
            CENTROID_FILL_STYLE = "rgba(80,190,240,0.6)";
        
        var RING_INNER_RADIUS = 35,
            RING_OUTER_RADIUS = 55;
        
        var ANNOTATION_FILL_STYLE = "rgba(0,0,230,0.9)",
            ANNOTATION_TEXT_SIZE = 12;
        
        var TICK_WIDTH =