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

最新推荐文章于 2024-05-09 09:54:41 发布

MIKUScallion

最新推荐文章于 2024-05-09 09:54:41 发布

阅读量6.5k

点赞数 3

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

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

版权

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 =

最低0.47元/天解锁文章

MIKUScallion

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas---Canvas绘制钟表，仪表盘

Canvas绘制钟表，仪表盘。《HTML5 Canvas核心技术》这本书在代码方面，没有丝毫注解，我感觉看的挺费劲，如果你想买书的话，最好还是先下本pdf看看吧。下面是表盘的绘制图解函数顺序是按照上图的顺序来写的，最后我为仪表加上了样式。源代码： canvas{ bord
复制链接

扫一扫