HTML5 Canvas画时钟

使用HTML5 canvas绘制了一个时钟。

运行效果如下:


绘制的步骤如下所示:

  1. 创建一个canvas标签,此标签本身并没有绘图功能,但它是绘图的容器。代码如下所示:
<canvas id="clock" width="500" height="500"></canvas>
  1. 绘制代码

我们的目标是,提供一个独立的时钟绘制功能,即提供一个Clock的类,通过new创建一个时钟实例,就可以绘制一个完整的时钟表盘。例如:

var clock = new Clock("clock", 200);  //"clock"是canvas的id, 200是整个表盘的大小,后面的指钟刻度均以此值自行调整
clock.start();  //开始绘制

Clock类的定义如下:

function Clock(canvasId, size) {
    var canvas = document.getElementById(canvasId); //获取canvas对象
    var imgData = null;    //用于保存绘制好的表盘刻度
    var context = null;    //保存context绘图对象
    var radius = size / 2; //钟表的半径
    this.start = function () {
        if (canvas.getContext) {  //测试是否支持绘图
            init();               //绘制表盘
            drawPointers();       //立刻绘制指针  
            setInterval(drawPointers, 10);  //每隔10毫秒绘制一次指针
        } else {
            console.log("浏览器不支持canvas绘图");
        }
    };
    //....其它方法
}

init方法,绘制表盘刻度,代码如下:

function init() {
    context = canvas.getContext("2d");
     
    //以下3句,可以绘制表盘的圆圈
    //context.beginPath();
    //context.arc(radius, radius, radius, 0, 2 * Math.PI, false);
    //context.stroke();

    //绘制60个刻度
    for (var i = 0; i < 60; i++) {
        var arc = i * 6 / 360 * 2 * Math.PI;
        var lineWidth = "1";
        var length = size * 0.01;

        if (i % 5 == 0) {  //其中每隔5个刻度,刻度线条要粗一个像素
            lineWidth = "2";
            length = size * 0.02;
        }

        context.beginPath();
        context.lineWidth = lineWidth;
        context.moveTo(Math.cos(arc) * (radius - length) + radius, Math.sin(arc) * (radius - length) + radius);
        context.lineTo(Math.cos(arc) * radius + radius, Math.sin(arc) * radius + radius);
        context.stroke();
    }

    //将绘制好的表盘保存起来
    imgData = context.getImageData(0, 0, size, size);
}

drawPointers方法,同时绘制时钟、分钟和秒针

function drawPointers() {
    context.putImageData(imgData, 0, 0); //恢复表盘数据到当前canvas,即覆盖掉上一次绘制的指针
    var ms = getDateByMilliseconds();    //获取以毫秒为单位的当前时间
    //秒针、分针和时针的绘制参数
    //其中的p指的是该指针转一圈需要的毫秒数量
    var configs = [
        { p: 60000, width: "1", style: "rgba(0,0,255)", length: radius * 0.8 },
        { p: 60000 * 60, width: "2", style: "rgba(100,0,255)", length: radius * 0.6 },
        { p: 1000 * 60 * 60 * 12, width: "4", style: "rgba(100,200,255)", length: radius * 0.5 },
    ];

    configs.forEach(function (c) {
        var sArc = (ms / c.p) * 2 * Math.PI - Math.PI / 2;

        context.beginPath();
        context.lineWidth = c.width;
        context.moveTo(radius, radius);
        context.lineTo(Math.cos(sArc) * c.length + radius, Math.sin(sArc) * c.length + radius);
        context.strokeStyle = c.style;
        context.stroke();
    });
}

getDateByMilliseconds,返回以毫秒为单为的当前时间:

function getDateByMilliseconds() {
    var now = new Date();
    var hours = now.getHours() * 3600 * 1000;
    var minutes = now.getMinutes() * 60 * 1000;
    var seconds = now.getSeconds() * 1000;

    return hours + minutes + seconds + now.getMilliseconds();
}

最后附上完整的代码:

function Clock(canvasId, size) {
    var canvas = document.getElementById(canvasId);
    var imgData = null;
    var context = null;
    var radius = size / 2;
    this.start = function () {
        if (canvas.getContext) {
            init();
            drawPointers();
            setInterval(drawPointers, 10);
        } else {
            console.log("浏览器不支持canvas绘图");
        }
    };


    function init() {
        context = canvas.getContext("2d");
        //context.beginPath();
        //context.arc(radius, radius, radius, 0, 2 * Math.PI, false);
        //context.stroke();

        for (var i = 0; i < 60; i++) {
            var arc = i * 6 / 360 * 2 * Math.PI;
            var lineWidth = "1";
            var length = size * 0.01;

            if (i % 5 == 0) {
                lineWidth = "2";
                length = size * 0.02;
            }

            context.beginPath();
            context.lineWidth = lineWidth;
            context.moveTo(Math.cos(arc) * (radius - length) + radius, Math.sin(arc) * (radius - length) + radius);
            context.lineTo(Math.cos(arc) * radius + radius, Math.sin(arc) * radius + radius);
            context.stroke();
        }

        imgData = context.getImageData(0, 0, size, size);
    }

    function drawPointers() {
        context.putImageData(imgData, 0, 0);
        var ms = getDateByMilliseconds();
        var configs = [
            { p: 60000, width: "1", style: "rgba(0,0,255)", length: radius * 0.8 },
            { p: 60000 * 60, width: "2", style: "rgba(100,0,255)", length: radius * 0.6 },
            { p: 1000 * 60 * 60 * 12, width: "4", style: "rgba(100,200,255)", length: radius * 0.5 },
        ];

        configs.forEach(function (c) {
            var sArc = (ms / c.p) * 2 * Math.PI - Math.PI / 2;

            context.beginPath();
            context.lineWidth = c.width;
            context.moveTo(radius, radius);
            context.lineTo(Math.cos(sArc) * c.length + radius, Math.sin(sArc) * c.length + radius);
            context.strokeStyle = c.style;
            context.stroke();
        });
    }

    function getDateByMilliseconds() {
        var now = new Date();
        var hours = now.getHours() * 3600 * 1000;
        var minutes = now.getMinutes() * 60 * 1000;
        var seconds = now.getSeconds() * 1000;

        return hours + minutes + seconds + now.getMilliseconds();
    }
}

var clock = new Clock("clock", 200);
clock.start();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351