Canvas绘制钟表插件 clock-plug-in

Canvas绘制钟表插件 clock-plug-in

使用html5中Canvas技术，绘制钟表表盘，表面大小支持自适应。

参数：

{
    hCol: 'xxx',// 时针颜色
    mCol: 'xxx', // 时针颜色
    sCol: 'xxx', // 时针颜色
    isNumCol: 'xxx', // 数字所在的点颜色
    noNumCol: 'xxx', // 非数字所在的点颜色
    dCol: 'xxx', // 中心圈颜色
}

用户可以根据需要自定义参数值，更改表盘的颜色样式

使用

在需要生成的目标html文件中，写入 canvas 标签，画布大小可根据需要自定义，由于表盘是圆形，所以画布宽高应该设置相等，不然画出的表盘会变形。

html代码：

<div class="box">
        <canvas id="clock" width="500" height="500"></canvas>
</div>

js代码：

<script type="text/javascript">
    $(function() {
        $("#clock").drawClock(
            //{
                // hCol: 'xxx',// 时针颜色
                // mCol: 'xxx', // 时针颜色
                // sCol: 'xxx', // 时针颜色
                // isNumCol: 'xxx', // 数字所在的点颜色
                // noNumCol: 'xxx', // 非数字所在的点颜色
                // dCol: 'xxx', // 中心圈颜色
            //}
        );
    })
</script>

注意： 写入以上代码前，html文件需要依次引入jQuery文件，和钟表插件js文件，保持html代码中的canvas的ID和jquery中获取的对象ID相同，示例中的元素ID为 clock

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/clock-canvas.min.js"></script>

运行结果

画出的钟表时间显示是实时的

---

下载

https://github.com/willerfu/clock-by-canvas/

感兴趣的朋友欢迎下载使用，由于自己写插件新手上路，存在不足，欢迎指出。