在canvas中画钟

最新推荐文章于 2023-05-15 22:17:25 发布
最新推荐文章于 2023-05-15 22:17:25 发布
阅读量121 收藏 1
点赞数
分类专栏： css3+html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44388393/article/details/88403954
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="500" height="500" style="border: 1px solid #eeeeee"></canvas>
<script>
    var ctx = document.querySelector('canvas').getContext('2d');
    //图片
    var img = new Image();
    // img.onload = function () {
    //     ctx.drawImage(img, 0, 0, 500, 500, 0, 0, 1000, 1000);
    // }
    img.src = 'image/1.jpg';


    function clock() {
        ctx.clearRect(0, 0, 500, 500)

        //获取当前的时分秒
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        h = h > 13 ? (h - 12) : h;


        function time(e) {
            return e = e < 10 ? '0' + e : e;
        }


        //画圆
        ctx.beginPath();
        ctx.arc(250, 250, 200, 0, 2 * Math.PI);
        ctx.strokeStyle = "yellow";
        ctx.lineWidth = 5;
        ctx.fillStyle = 'rgb(60,253,126)'
        ctx.fill();
       
       // ctx.drawImage(img, 0, 0, 250, 250, 10, 10, 470, 470);
        ctx.stroke();
        ctx.clip()//裁剪

        //时间
        var textTime = time(h) + ':' + time(m) + ':' + time(s)
        ctx.beginPath();
        ctx.font = "20px 宋体"
        ctx.fillText(textTime, 210, 400);
        ctx.fillStyle = 'rgb(60,253,126)'
        ctx.fill()

        h = h + m / 60;

        //时刻度
        for (var i = 0; i < 12; i++) {
            //保存当前的状态
            ctx.save();
            ctx.beginPath();
            ctx.translate(250, 250);
            ctx.rotate(i * 30 * Math.PI / 180);
            ctx.moveTo(0, -185);
            ctx.lineTo(0, -200);
            ctx.strokeWidth = 8;
            ctx.strokeStyle = 'yellow'
            ctx.stroke();
            ctx.restore();//恢复当前的状态
        }
        //分刻度
        for (var i = 0; i < 60; i++) {
            //保存当前的状态
            ctx.save();
            ctx.beginPath();
            ctx.translate(250, 250);
            ctx.rotate(i * 6 * Math.PI / 180);
            ctx.moveTo(0, -190);
            ctx.lineTo(0, -200);
            ctx.strokeWidth = 8;
            ctx.strokeStyle = 'yellow'
            ctx.stroke();
            ctx.restore();//恢复当前的状态
        }

        //时针
        //保存当前的状态
        ctx.save();
        ctx.beginPath();
        ctx.translate(250, 250);
        ctx.rotate(h * 30 * Math.PI / 180);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -100);
        ctx.lineWidth = 7;
        ctx.strokeStyle = 'pink'
        ctx.stroke();
        ctx.restore();//恢复当前的状态

        //分针
        //保存当前的状态
        ctx.save();
        ctx.beginPath();
        ctx.translate(250, 250);
        ctx.rotate(m * 6 * Math.PI / 180);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -120);
        ctx.lineWidth = 5;
        ctx.strokeStyle = 'pink'
        ctx.stroke();
        ctx.restore();//恢复当前的状态

        //秒针
        //保存当前的状态
        ctx.save();
        ctx.beginPath();
        ctx.translate(250, 250);
        ctx.rotate(s * 6 * Math.PI / 180);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -160);
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'pink'
        ctx.stroke();
        ctx.restore();//恢复当前的状态
		//秒针上的圆
        ctx.save();
        ctx.beginPath();
        ctx.translate(250, 250);
        ctx.rotate(s * 6 * Math.PI / 180);
        ctx.arc(0, -130, 4, 0, 2 * Math.PI)
        ctx.fillStyle = 'yellow'
        ctx.fill()
        ctx.strokeStyle = "pink"
        ctx.lineWidth = 2;
        ctx.stroke()
        ctx.restore();//恢复当前的状态
		//圆心
        ctx.save();
        ctx.beginPath();
        ctx.translate(250, 250);
        ctx.arc(0, 0, 6, 0, 2 * Math.PI)
        ctx.fillStyle = 'yellow'
        ctx.fill()
        ctx.strokeStyle = "pink"
        ctx.lineWidth = 2;
        ctx.stroke()
        ctx.restore();//恢复当前的状态

    }


    setInterval(clock, 1000)

    clock();

</script>
</body>
</html>
逆魂夜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas画时钟
pumpkin_truck的博客
06-04 2503
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
Canvas绘制一个时钟
秃头小桂子
05-11 2230
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
使用Canvas(画布）完成一个时钟
guitarist0505的博客
07-17 7887
Canvas最初由苹果推出，后来由W3C推广，目前几乎所有浏览器都支持Canvas。 canvas是一个闭合标签，包括宽度和高度属性。默认值为宽300，高150。浏览器不支持canvas时，canvas的文本会显示，通常用来检测浏览器兼容性。 &lt;canvas id="can" width="300" height="300"&gt;您的浏览器不支持canvas&lt;/canvas&g...
Canvas画钟
weixin_34161083的博客
08-31 89
为什么80%的码农都做不了架构师？>>> ...
用canvas画钟，实时变化的钟
weixin_50813125的博客
09-25 147
先上代码，详解之后补上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
canvas 菜鸟入门笔记
lilikk1314的博客
10-15 656
之前就知道有canvas画布,但是一直都没有用的机会,so...一直也没学习过,今天就开始菜鸟的canvas学习~ <canvas></canvas>是个双标签 ,标签中间可以放替换内容--如果浏览器不兼容画布的话,就会显示中间的替代内容(i9之前的版本的不支持的!) <canvas>有width height id 属性 (默认不设置宽高的时候显示300px宽和150px高) canvas画布其实就是纯js画的,canvas元素有很多方法 getContext.
Canvas画钟 js
weixin_34233856的博客
03-05 75
用Canvas模拟了webQQ里头的那个钟。下图左侧是webQQ的原版，右侧是画出来的。效果预览 画的过程中都还比较顺利，只是最里边的那个小圆顶部有一点点小渐变，花了不少功夫。 用得比较多的是旋转部分的代码，得先存之前的位置，然后再旋转，再恢复到原来的属性继续往下画。 HTML部分： <!DOCTYPE HTML><html> <head&gt...
php画钟,canvas如何绘制钟表的方法_html5教程技巧
weixin_39983384的博客
03-23 71
这篇文章主要介绍了HTML5中的canvas如何绘制钟表的方法的相关资料，小编觉得HTML真的是越来越强大的，现在分享给大家，也给大家做个参考。对HTML的小伙伴们可以一起跟随小编过来看看吧本文介绍了canvas如何绘制钟表的方法，分享给大家，具体如下：效果图为上代码：var canvas = document.getElementById('canvas');var ctx = canvas.g...
前端canvas例子，如何获取鼠标在canvas中的位置。
06-15
canvas例子，如何获取鼠标在canvas中的位置。html+js。下载双击即可在浏览器运行，F12可查看源代码。
div悬浮在canvas上
11-24
在HTML5中，Canvas元素提供了一种在网页上绘制图形的强大方式，而div元素则常用于构建页面布局和内容容器。当我们需要在一个canvas元素上实现一个div元素的悬浮效果时，这涉及到对CSS样式和HTML结构的深入理解。本文...
在小程序中使用canvas的方法示例
01-20
从小程序的文档中没有找到相应的颜色选择组件，昨天（18.3.13）小程序插件功能上线了，小伙伴们也可以选择插件。写这个demo是在前两天写的，所以自己就实现了一个简单的颜色选择。 鉴于组件的复用，而目前小程序的
canvas 画布在主流浏览器中的尺寸限制详细介绍
08-31
总结来说，canvas画布在主流浏览器中的尺寸限制是一个重要的考虑因素，开发者需要根据具体目标平台和性能需求来合理设定canvas的尺寸。通过了解和掌握这些限制，我们可以更好地利用canvas进行高性能、跨平台的图形...
Vue中使用canvas方法总结
01-19
下面就是小编带给大家的Vue中怎么使用canvas方法操作，希望能够给你们带来一定的帮助，谢谢大家的观看。 1、如果数组中都是canvas对象, vue如何能吧canvas对象渲染到页面。v-html只能渲染出一个字符串, 没办法像...
Canvas实现简单时钟表盘
qq_31808873的博客
05-15 521
Canvas绘制表盘
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
07-17
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
torchaudio-0.13.1+cpu-cp39-cp39-win_amd64.whl
最新发布
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
出入库存盘点表-图表分析-分类查询-Excel模板
07-17
【作品名称】：出入库存盘点表-图表分析-分类查询-Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
在canvas中设置虚线边框
06-06
要在canvas中设置虚线边框，可以使用canvas的`setLineDash()`方法来设置边框的虚线样式。具体步骤如下： 1. 首先，使用`strokeStyle`属性设置边框颜色。 2. 然后，使用`setLineDash()`方法设置虚线样式，该方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值