canvas时钟可随着画布变大而比例变大

- 日理万妓 2022-04-24 05:06 200阅读 0赞

# [canvas时钟可随着画布变大而比例变大][canvas] #

1.  HTML

没有添加任何图片的canvas时钟，内涵详细注释，放大canvas画布时，时针会随着比例进行变大缩小

<canvas id="clock" width="200px" height="200px"></canvas>

2.

* {
          
        margin:0;
        padding:0;
    }
    canvas {
          
        display:block;
        margin:200px auto;
    }

3.JS

var dom = document.getElementById('clock');
    var ctx = dom.getContext('2d');
    var width = ctx.canvas.width;
    var height = ctx.canvas.height;
    var r = width / 2;
    var rem = width / 200;
    //无论canvas画布多大 时钟都会随着比例变化
    
    function drawBackground() {
    
        ctx.save();
        //保存当前画布 以便使用clearRect()
    
        /*****************绘制背景圆****************************/
    
        ctx.translate(r, r);
        //把绘图的中心移动到坐标为（r，r）的位置
    
        ctx.beginPath();
        //开始绘图
    
        ctx.lineWidth = 10 * rem;
        //线条宽度
    
    
        ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false);
        //绘制一个圆坐标为刚刚移动到的位置  因为半径为canvas正方形的一半所以半径要减去线条宽度的一半
    
        ctx.stroke();
        //绘制
    
        /****************绘制小时点********************************/
        var hourNumber = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
        //定义一个小时点数组  因为圆的起点是90度那个位置开始的
    
        ctx.font = 18 * rem + 'px Arial';
        //设置字体大小
    
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        //设置文本的对齐方式 文本对齐居中 文本基线居中对齐
    
        hourNumber.forEach(function(number, i) { //遍历并获取该数组 传入参数 一个为数字 一个是索引
    
            var rad = 2 * Math.PI / 12 * i;
            //定义弧度 12个数字 相差就是 2*Math.PI / 12 这就是每个小时数的弧度  再乘以索引以对应弧度的计算
    
            var x = Math.cos(rad) * (r - 30 * rem);
            //求x坐标 用cos方法 在乘以半径 因为小时点的半径肯定会小一些所以就半径也要小一点
    
            var y = Math.sin(rad) * (r - 30 * rem);
            //求y坐标 方法同上
    
            ctx.fillText(number, x, y);
            //填充文本 第一个参数是 文本 第二，三个为坐标
        });
    
        /************绘制分钟点**********************/
        for (var i = 0; i < 60; i++) {
            //利用for循环遍历60个点
    
            var rad = 2 * Math.PI / 60 * i;
            //定义弧度60个点 
    
            var x = Math.cos(rad) * (r - 18 * rem);
            //定义x坐标的位置 方法同上
    
            var y = Math.sin(rad) * (r - 18 * rem);
            //定义y坐标的位置 方法同上
    
            ctx.beginPath();
            //因为上面有过beginPath所以需要重新绘制
    
            if (i % 5 === 0) {
                //因为小时点是每隔5个就有一个所以 如果i取余等于0 就是小时数 小时点的样式带啊如下
                ctx.fillStyle = "black"
                ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);
                //绘制圆 半径为2像素
            } else {
                //反过来就是这样
                ctx.fillStyle = "#ccc";
                ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);
                //绘制圆 半径为2像素
            }
            ctx.fill();
            //因为需要实心圆 所以需要填充
    
        }
    
    }
    /****************绘制时针*************/
    
    function drawHour(hour, minute) {
        //绘制时针
    
        ctx.save();
        //save()和restore连用 表示先将其绘图环境保存起来 restore返回之前保存的状态
    
        ctx.beginPath();
    
        var rad = 2 * Math.PI / 12 * hour;
        //设置时针的位置 定义弧度 
    
        var mrad = 2 * Math.PI / 12 / 60 * minute;
        //因为时间在4:30的时候时针应该会在4-5之间 所以我们需要计算其当时的弧度
    
        ctx.rotate(rad + mrad);
        //旋转至该弧度  加上分针中间的弧度 所以时针的弧度等于 时针的弧度加上分针的弧度
    
        ctx.lineCap = 'round';
        //绘制线条为圆头
    
        ctx.lineWidth = 5 * rem;
    
        ctx.moveTo(0, 10 * rem);
        //移动圆点 因为时针需要多点尾巴出来所以定义到10；
    
        ctx.lineTo(0, -r / 2);
        //添一个点，将其链接到这个位置
    
        ctx.stroke();
    
        ctx.restore();
    
    
    }
    
    /*************绘制分针******************/
    function drawMinute(minute) {
        //绘制分针方法与时针方法类似
    
        ctx.save();
    
        ctx.beginPath();
    
        var rad = 2 * Math.PI / 60 * minute;
    
        ctx.rotate(rad);
    
        ctx.lineWidth = 3 * rem;
    
        ctx.lineCap = 'round';
    
        ctx.moveTo(0, 10 * rem);
    
        ctx.lineTo(0, -r + 30 * rem);
    
        ctx.stroke();
    
        ctx.restore();
    
    }
    
    /*******绘制秒针****************/
    function drawSecond(second) {
    
        ctx.save();
    
        ctx.beginPath();
    
        ctx.fillStyle = '#f00';
    
        var rad = 2 * Math.PI / 60 * second;
    
        ctx.rotate(rad);
    
        ctx.moveTo(-2 * rem, 20 * rem);
        //绘制秒针的线条 一头大 一头小
        ctx.lineTo(2 * rem, 20 * rem);
    
        ctx.lineTo(1, -r + 18 * rem);
    
        ctx.lineTo(-1, -r + 18 * rem);
    
        ctx.fill();
        //绘制线条颜色
    
        ctx.restore();
    }
    
    /************绘制中心圆点*************/
    function drawDot() {
    
        ctx.beginPath();
    
        ctx.fillStyle = "#fff";
    
        ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI, false);
    
        ctx.fill();
    }
    
    
    
    
    function draw() {
    
        ctx.clearRect(0, 0, width, height);
        //设置计时器每秒调用一次 但是因为调用后 之前的还会存在所以需要每秒清除画布
    
        var now = new Date();
    
        var hour = now.getHours();
    
        var minute = now.getMinutes();
    
        var second = now.getSeconds();
    
    
        drawBackground();
        drawHour(hour, minute);
        drawMinute(minute);
        drawSecond(second);
        drawDot();
        ctx.restore();
    }
    
    setInterval(draw, 1000);

效果图：![650351-20190124155703081-1147856473.png][]

posted @ 2019-01-24 15:57 [波霸38][38] 阅读( ...) 评论( ...) [编辑][Link 1] 收藏

[canvas]: https://www.cnblogs.com/sharing1986687846/p/10314987.html
[650351-20190124155703081-1147856473.png]: /images/20220219/bcf3d0833aca449bbeba22226b6bc18d.png
[38]: https://www.cnblogs.com/sharing1986687846/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=10314987

发表评论取消回复

表情：

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

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

相关阅读

相关生活大爆炸之光速可变，光速可超

为何读第二篇的人数远远大于第一篇的呢……因为两者是连续的，为了能看懂，请先阅读：[http://blog.csdn.net/cheny\_com/article/details

喜欢ヅ旅行/ 2023年08月17日 15:53/ 0 赞/ 82 阅读

相关 Java –可变和不可变对象

本文向您展示Java中Mutable和Immutable对象之间的区别 1. 可变对象 –创建对象后，您可以更改状态和字段。例如： `StringBuilder` ， `j

一时失言乱红尘/ 2023年02月15日 05:17/ 0 赞/ 132 阅读

相关 html js 鼠标变图片大小,js之图片变大变小效果

1、当鼠标移到图片上，图片变大；当鼠标移出图片，图片变小，效果如图： ![c163c928e3d53b6757b3c778431f385d.png][] ![363ce0b

淩亂°似流年/ 2022年10月06日 08:57/ 0 赞/ 419 阅读

相关 html一键使网页字体变大,网页字体变大了怎么办

网页字体变大了导致重叠怎么办？不是缩放的原因我的电脑网页字体变大了怎么办按住CTRL在滚动鼠标滚轮。。。或者在网页右下角有个调整的，，百分之多少的、。或者CTRL+ 或

电玩女神/ 2022年10月06日 07:51/ 0 赞/ 231 阅读

相关 iOS 运行发现，view随着屏幕的变大整体放大的问题

前言今天忽然接到测试那边传来的bug说，我的字体没有做适配。字体会随着屏幕变大而变大，当时可凌乱，因为我明明做了适配了。马上去看代码，又去写了个demo去对比，但就是没

待我称王封你为后i/ 2022年08月20日 09:20/ 0 赞/ 117 阅读

相关首字母变大写

首字母变大写 Time Limit: 1000ms Memory limit: 65536K 有疑问？点这里^\_^ 题目描述输入一个英文句子，将每个单词的

红太狼/ 2022年08月10日 04:55/ 0 赞/ 213 阅读

相关 H5新功能：canvas画布时钟

用canvas画一个简单的时钟。（我画的很丑，可以自己改动…） > [点我看效果][Link 1] 直接上代码： <!DOCTYPE html> <htm

分手后的思念是犯贱/ 2022年05月23日 12:26/ 0 赞/ 277 阅读

相关 python可变和不可变类型

列表是可变的（Mutable） 1）索引改变 2）方法改变 ![70][] 字符串是不可变的（Immutable）通过索引改变会报错字符串方法只是返回一个新字符

分手后的思念是犯贱/ 2022年05月17日 11:00/ 0 赞/ 204 阅读

相关 canvas时钟可随着画布变大而比例变大

[canvas时钟可随着画布变大而比例变大][canvas] 1. HTML 没有添加任何图片的canvas时钟，内涵详细注释，放大canvas画布时，时针会随

- 日理万妓/ 2022年04月24日 05:06/ 0 赞/ 201 阅读

相关 python 的 dict 会随着key的增加而变慢吗

很多人会告诉你，这是Hash Table，而Hash Table的访问速度是O(1)的，而对于你来说，这就和没说一样。这个答案既不算精确，也没能回答你的问题。首先如果你真的

偏执的太偏执、/ 2022年04月06日 19:22/ 0 赞/ 164 阅读