canvas实现钟表

最新推荐文章于 2023-03-30 16:19:17 发布
最新推荐文章于 2023-03-30 16:19:17 发布
阅读量91 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44552543/article/details/90580925
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="text" height="400" width="400"></canvas>
</body>
<style>
    #text{
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
        background: gray;
    }
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
        overflow: hidden;
        background: pink;
    }

</style>
<script type="text/javascript">
    window.onload=function () {
        var canvas=document.getElementById("text");
        if (canvas.getContext){
            var ctx=canvas.getContext("2d");
            setInterval(function () {
                ctx.clearRect(0,0,canvas.width,canvas.height)
                moo();
            },1000);
            function moo() {
                ctx.save();
                ctx.lineWidth=8;
                ctx.strokeStyle="black";
                ctx.lineCap="round";
                ctx.translate(200,200);
                ctx.rotate(-90*Math.PI/180);
                ctx.beginPath();


                //外层空心圆盘
                ctx.save();
                ctx.strokeStyle="blue";
                ctx.lineWidth=14;
                ctx.beginPath();
                ctx.arc(0,0,140,0,360*Math.PI/180);
                ctx.stroke();
                ctx.restore();

                //时针刻度
                ctx.save();
                for (var i=0;i<12;i++){
                    ctx.rotate(30*Math.PI/180);
                    ctx.beginPath();
                    ctx.moveTo(100,0);
                    ctx.lineTo(120,0);
                    ctx.stroke();
                }
                ctx.restore();
                //分针刻度
                ctx.save();
                ctx.lineWidth=4
                for (var i=0;i<60;i++){
                    if (i%5!=0){
                        ctx.beginPath();
                        ctx.moveTo(117,0);
                        ctx.lineTo(120,0);
                        ctx.stroke();
                    }
                    ctx.rotate(6*Math.PI/180);
                }
                ctx.restore();

                //时针，分针，秒针，表座
                var date= new Date();
                var s=date.getSeconds();
                var m=date.getMinutes()+s/60;
                var h=date.getHours()+m/60;
                h=h>12?h-12:h;
                //时针
                ctx.save();
                ctx.lineWidth=14;
                ctx.rotate(h*30* Math.PI/180);
                ctx.beginPath();
                ctx.moveTo(-20,0);
                ctx.lineTo(80,0);
                ctx.stroke();
                ctx.restore();

                //分针
                ctx.save();
                ctx.lineWidth=10;
                ctx.rotate(m*6*Math.PI/180);
                ctx.beginPath();
                ctx.moveTo(-28,0);
                ctx.lineTo(112,0);
                ctx.stroke();
                ctx.restore();

                //秒针
                ctx.save();
                ctx.lineWidth=6;
                ctx.strokeStyle="red";
                ctx.fillStyle="red"
                ctx.rotate(s*6*Math.PI/180);
                ctx.beginPath();
                ctx.moveTo(-30,0);
                ctx.lineTo(83,0);
                ctx.stroke();
                //表座
                ctx.beginPath();
                ctx.arc(0,0,10,0,360*Math.PI/180);
                ctx.fill();
                //表头
                ctx.beginPath();
                ctx.arc(96,0,10,0,360*Math.PI/180);
                ctx.stroke();
                ctx.restore();
                ctx.restore();

            }
        }
    }
</script>
</html>

在这里插入图片描述

weixin_44552543
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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 2229
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
canvas 绘制钟表
kklkjfdiiu的博客
03-30 158
时钟示例
html：canvas画布绘图简单入门-绘制时钟-3
彭世瑜的博客
01-01 1470
示例10：绘制时钟 <canvas id="canvas" width="600" height="600"></canvas> <script> let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); let width = canvas.width
Canvas之绘制时钟
summer爱前端
08-18 1325
用canvas画一个时钟玩玩吧，比css+js简单太多了……
canvas时钟
weixin_44040583的博客
12-15 80
canvas时钟
canvas个性化时钟
yuan_xiao_long的博客
05-02 993
效果演示 简介 十二小时制的时钟，刻度在圆盘上面显示，交叉线顶角为分和秒的刻度。 时分秒：最小的是秒、中等的是分、圈内的蓝点为时。 中心圆：随着秒钟缩小，数字时钟的显示。
canvas实现钟表效果
08-31
在钟表的例子中，我们主要利用了Canvas的绘图方法和时间处理来实现动态的时针、分针和秒针。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，用于展示我们的钟表。在这个例子中，`<canvas>`元素的id为"canvas1...
使用canvas绘制钟表
11-06
本教程将详细介绍如何使用...通过深入理解和实践，你可以利用canvas实现更多复杂的2D图形和动画效果。在实际项目中，你可能还需要考虑性能优化，比如减少不必要的重绘或者使用requestAnimationFrame替代setInterval。
canvas画钟表源码
04-16
利用canvas实现web端钟表的展示，同时加强我们对canvas各项属性和方法的印象和运用
canvas时钟 javascript
12-21
基于HTML5实现的时钟效果，利用canvas实现的时钟效果，代码清晰，可根据自己爱好修改样式，可供参考使用
HTML5 Canvas绘制时钟
06-01
NULL 博文链接：https://wenhai.iteye.com/blog/2158714
HTML5实现钟表
05-07
使用HTML5的Canvas做的一个钟表小程序，可以作为入门学习！
canvas如何绘制钟表的方法
09-27
钟表上有小时刻度和分钟刻度，这些可以用循环来实现。对于小时刻度，循环12次，每次旋转`i * 1/12 * 2 * Math.PI`，以每小时30度的角度变化。对于分钟刻度，循环60次，每次旋转`i * 1/60 * 2 * Math.PI`，每分钟6度...
canvas画图-钟表
sdaulee的博客
04-15 270
调用了window.requestAnimationFrame(绘制函数)，然后在绘制函数中继续调用window.requestAnimationFrame(绘制函数)，这种情况下，每一次绘制都不能影响下一次，故需要在变换开始和结束的时候添加 ctx.save()/ctx.restore() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta...
【Canvas】js用canvas绘制一个钟表时钟动画效果
TA远方
11-29 1466
学习JavaScript的看过来，有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，旋转角度绘图这个重点掌握到了吗，这里有一个例子，如何用canvas画钟表时钟动图效果，接下来开始讲，边学边做。
canvas钟表
Goaread的博客
07-01 133
canvas可以绘制很多图形，这个实例绘制的是一个对准当前时间的钟表。 其组成是：外层空心圆盘、时针刻度、时针、分针、秒针、表座、秒头。 绘制时注意清除每次叠加的图形。 css部分 * { margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; background: pink; } #clock { background: gray; position:.
利用canvas画钟表
余光的博客
07-16 1253
canvas （HTML5新增标签） **什么是canvas？ Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。 Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。 首先贴出最终结果，...
Android实现钟表的布局和代码示例
最新发布
05-30
Android实现钟表可以使用自定义View和Canvas来实现。以下是一个简单的示例布局和代码： 布局： ```xml xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值