用canvas画一个简陋的时钟

拼搏现实的明天。 2021-12-20 11:59 324阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlaUVpZ2h0_size_16_color_FFFFFF_t_70]  
样式可以自己根据需要调整，这只是一个样板  
代码有些繁琐 不多介绍，主要是使用 context.save()和context.restore()两个方法

var Clock = function(){
            this.ctx = document.querySelector("canvas").getContext("2d");
            this.w = this.ctx.canvas.width;
            this.h = this.ctx.canvas.height;
            this.r = 200;
            this.mSpace = (2*this.r*Math.PI)/60 - 3;
            this.hSpace = (2*this.r*Math.PI)/12 - 3;
        }
        // 初始化
        Clock.prototype.init = function(){
            this.drawPan();
            this.drawHour();
            this.drawMinute();
            this.drawSeconds();
            this.drawPoint();
        }
        //画表盘
        Clock.prototype.drawPan = function (){
            var ctx = this.ctx;
            var w = this.w;
            var h = this.h;
            var r = this.r;
            var mSpace = this.mSpace;
            var hSpace = this.hSpace;
            ctx.save();
            ctx.beginPath();
            ctx.arc(w/2,h/2,r+2,0,2*Math.PI);
            ctx.fillStyle = "cyan";
            ctx.fill();
            //分
            ctx.beginPath();
            ctx.arc(w/2,h/2,r,0,2*Math.PI);
            ctx.setLineDash([3,mSpace]);
            ctx.strokeStyle = "green";
            ctx.lineWidth = 8;
            ctx.stroke();
            //时
            ctx.beginPath();
            ctx.arc(w/2,h/2,r,0,2*Math.PI);
            ctx.setLineDash([3,hSpace]);
            ctx.lineWidth = 15;
            ctx.stroke();
            //圈
            ctx.beginPath();
            ctx.arc(w/2,h/2,205,0,2*Math.PI);
            ctx.setLineDash([0]);
            ctx.lineWidth = 5;
            ctx.stroke();
    
            ctx.restore();
        }
        // 计算当前时间表针角度
        Clock.prototype.getAngle = function(){
            var date = new Date();
            var h = Math.abs(date.getHours()-12);
            var m = date.getMinutes();
            var s = date.getSeconds();
            // var hr = ((h/12)+((m *60+s)/3600)/12) * 2 * Math.PI;
            // var mr = ((m / 60) + (s / 3600)) * 2 * Math.PI - hr;
            // var sr = (s / 60) * 2 * Math.PI - mr;
            var hr = ((h/12)+((m *60+s)/3600)/12) * 2 * Math.PI;
            var mr = ((m / 60) + (s / 3600)) * 2 * Math.PI;
            var sr = (s / 60) * 2 * Math.PI;
            var obj = {
                hr:hr,
                mr:mr,
                sr:sr,
            }
            return obj;
        }
        // 时针
        Clock.prototype.drawHour = function () {
            var ctx = this.ctx;
            var w = this.w;
            var h = this.h;
            var angle = this.getAngle().hr;
            ctx.save();
            ctx.beginPath();
            ctx.translate(w/2,h/2);//位移的是画布的基点
            ctx.rotate(angle);
            ctx.moveTo(0,0);
            ctx.lineTo(0,-100);
            ctx.strokeStyle = "green";
            ctx.lineWidth = 3;
            ctx.lineCap = "round";
            ctx.stroke();
            ctx.restore();
        }
        // 分针
        Clock.prototype.drawMinute = function () {
            var ctx = this.ctx;
            var w = this.w;
            var h = this.h;
            var angle = this.getAngle().mr;
            ctx.save();
            ctx.beginPath();
            ctx.translate(w/2,h/2);//位移的是画布的基点
            ctx.rotate(angle);
            ctx.moveTo(0,0);
            ctx.lineTo(0,-130);
            ctx.strokeStyle = "green";
            ctx.lineWidth = 3;
            ctx.lineCap = "round";
            ctx.stroke();
            ctx.restore();
        }
        //秒针
        Clock.prototype.drawSeconds = function () {
            var ctx = this.ctx;
            var w = this.w;
            var h = this.h;
            var angle = this.getAngle().sr;
            ctx.save();
            ctx.beginPath();
            ctx.translate(w/2,h/2);//位移的是画布的基点
            ctx.rotate(angle);
            ctx.moveTo(0,0);
            ctx.lineTo(0,-160);
            ctx.strokeStyle = "green";
            ctx.lineWidth = 3;
            ctx.lineCap = "round";
            ctx.stroke();
            ctx.restore();
        }
        Clock.prototype.drawPoint = function(){
            var ctx = this.ctx;
            var w = this.w;
            var h = this.h;
            var angle = this.getAngle().sr;
            ctx.save();
            ctx.beginPath();
            ctx.translate(w/2,h/2);
            ctx.rotate(angle);
            ctx.arc(0,0,5,0,2*Math.PI);
            ctx.arc(0,-140,5,0,2*Math.PI);
            ctx.fillStyle = "blue";
            ctx.fill();
            ctx.restore();
        }
        var clock = new Clock();
        clock.init();
        setInterval(function () {
            clock.init();
        },1000);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlaUVpZ2h0_size_16_color_FFFFFF_t_70]: /images/20211220/a97b15028570415b94defccdf9af28dd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，324人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas画一个笑脸和画一个三角形

画一个笑脸主要用到的是画弧形的方法：arc，有五个参数：起始坐标，半径，弧形起始坐标，还有一个参数是顺时针还是逆时针。画的笑脸：虽然丑了点，但是学习了 ![b614cc7b4

矫情吗；*/ 2024年02月21日 07:24/ 0 赞/ 76 阅读

相关用Canvas画一个刮刮乐

Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。Canvas元素是HTML5的

短命女/ 2022年12月09日 01:56/ 0 赞/ 250 阅读

相关 Canvas--粒子时钟

digit.js digit = [ [ [0,0,1,1,1,0,0],

àì夳堔傛蜴生んèń/ 2022年05月31日 05:26/ 0 赞/ 287 阅读

相关用canvas画一个钟表

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

素颜马尾好姑娘i/ 2022年05月21日 06:19/ 0 赞/ 294 阅读

相关 [html5 canvas]用html5的canvas画一个可移动的方块

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

灰太狼/ 2022年04月18日 04:48/ 0 赞/ 431 阅读

相关用canvas画一个简陋的时钟

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

拼搏现实的明天。/ 2021年12月20日 11:59/ 0 赞/ 325 阅读

相关 64.canvas画一个表（1）

![918206-20190515220319806-96068074.png][] <!DOCTYPE html> <html lang="en">

梦里梦外;/ 2021年12月05日 00:53/ 0 赞/ 337 阅读

相关 canvas画时钟

![70][] 效果如上，可以获取当前时间显示，秒针可以动．１．文件结构： ![70 1][] ２．html: <!DOCTYPE html>

忘是亡心i/ 2021年10月09日 04:18/ 0 赞/ 580 阅读

相关用canvas画一个简单的圆（带进度条效果）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-eq

柔情只为你懂/ 2021年09月16日 07:22/ 0 赞/ 426 阅读

相关用java画的动态时钟

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Myth丶恋晨/ 2021年07月24日 21:35/ 0 赞/ 431 阅读