利用canvas制作时钟表

最新推荐文章于 2022-05-11 19:24:55 发布
最新推荐文章于 2022-05-11 19:24:55 发布
阅读量272 收藏
点赞数
文章标签： canva 时钟表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39191274/article/details/81140570
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas画布绘制时钟</title>
    <style>
      body{background: black}
        #c1{background: white}
        span{color:white;}
    </style>
</head>
<body>
<canvas id="c1" width="400" height="400">
    <span>
        不支持canvas浏览器
    </span>
</canvas>
<script>
    var oC= document.querySelector("canvas");
    var oGC=oC.getContext('2d');
    //浏览器打开时停滞一秒才会运行，解决办法是封装成一个函数，开始时进行调用，在开始计时器。
    //进行画布的反复绘制，从而达到时针变化的效果。
    setInterval(function(){
        oGC.clearRect(0,0,oC.offsetWidth,oC.offsetHeight);
        //保存路径
        oGC.save();
        //大圆和小刻度
        for(var i=0;i<60;i++)
        {
            oGC.beginPath();
            oGC.moveTo(200,200);
            oGC.arc(200,200,100,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
            oGC.stroke();
        }
        oGC.beginPath();
        oGC.moveTo(200,200);
        oGC.arc(200,200,90,0,360*Math.PI/180,false);
        oGC.fillStyle="white";
        oGC.fill();
        //大刻度
        for(var i=0;i<12;i++) {
            oGC.beginPath();
            oGC.moveTo(200,200);
            oGC.arc(200,200,100,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
            oGC.lineWidth='2';
            oGC.stroke();
        }
        oGC.beginPath();
        oGC.fillStyle="#fff";
        oGC.arc(200,200,80,0,360*Math.PI/180,false)
        oGC.fill();
        //时间的换算
        var oD=new Date();
        //canvas起点是3点位置所以-90是12点的位置。小时的转化是由小时和分钟进行转化。1小时为30度，30度为60分钟，则1分钟为0.5度
        var oH=Math.floor(oD.getHours()*30-90+oD.getMinutes()/2)
        //同理
        var oM=Math.floor(oD.getMinutes()*6-90+oD.getSeconds()/10);
        var oS=oD.getSeconds()*6-90;
        //时针的绘制
        oGC.beginPath();
        oGC.moveTo(200,200);
        oGC.arc(200,200,40,oH*Math.PI/180,oH*Math.PI/180,false);
        oGC.lineWidth='4';
        oGC.strokeStyle="pink";
        oGC.stroke();
        //分针的绘制
        oGC.beginPath();
        oGC.moveTo(200,200);
        oGC.arc(200,200,60,oM*Math.PI/180,oM*Math.PI/180,false);
        oGC.lineWidth='3';
        oGC.strokeStyle="yellow";
        oGC.stroke();
        //秒针的绘制
        oGC.beginPath();
        oGC.moveTo(200,200);
        oGC.arc(200,200,80,oS*Math.PI/180,oS*Math.PI/180,false);
        oGC.lineWidth='2';
        oGC.strokeStyle="green";
        oGC.stroke();
  oGC.restore();
    },1000)

</script>
</body>
</html>

注意：1.圆的绘制：arc(x,y,半径,起始弧度,结束弧度,旋转方向)

           3.canvas的圆的起点在3点钟的位置。

           2.旋转方向：顺时针（默认：false）、逆时针（true）。

          4.时间转化。

 

小葵c
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 canvas实现钟表
a821253811的博客
09-21 1128
上次说到了canvas的画布如何画矩形、圆形和自由画图实现你画我猜的效果，这次就来说一下如何实现我们生活中最经常看到的时钟吧。 还是和之前一样的操作，写好画布的大小，因为有些浏览器不支持，所以写上不支持，在遇到不支持的浏览器时就会出现不支持三个字 &lt;canvas id="canvas" width="400" height="400"&gt; 不支持 &lt;/canvas&...
Canvas 实现钟表
梓鸿
04-17 201
Canvas 实现钟表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Clock</title> </head> <bo...
用canvas制作钟表
Fbbhahaha的博客
03-29 416
&lt;!DOCYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="canvas" wid
【Canvas时钟】使用canvas制作简易时钟
qq_44871797的博客
12-15 378
使用canvas制作简易时钟 准备工作 创建一个画布 <style> * { padding: 0; margin: 0; } </style> <canvas id="clock" width="400" height="400"></canvas> <!-- 创建一个400*400大小的画布 --> 获取到画布及画布绘图环境 var clock = document.getElementById("clock");//获取到画布 v
canvas绘制钟表
CHENpeiyingCHEN的博客
10-19 355
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;钟表&lt;/title&gt; &lt;style type="text/css"&gt; canvas{ border: 1p
使用Canvas制作的钟表
10-09
Canvas钟表控件，使用方法如下： <!doctype html> <script type="text/javascript" src="Clock.js"></script> <canvas width='500' height='500' id='clock'></canvas> initClock('clock'); ...
html5 canvas绘制时钟表时间效果源码下载
11-06
html5 canvas绘制时钟表时间效果源码下载 html5 canvas绘制时钟表时间效果源码下载
canvas实现钟表效果
08-31
本文主要分享了canvas实现钟表效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
HTML5 Canvas指针时钟表特效
06-24
HTML5 Canvas指针时钟表特效是一款简洁好看的圆形指针时钟特效下载。
使用canvas绘制钟表
11-06
使用canvas绘制钟表 使用canvas绘制钟表 使用canvas绘制钟表
canvas数字时钟效果
08-10
canvas数字时钟效果
canvas 做时钟
qq_43233643的博客
01-23 205
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
使用canvas简单绘制时钟
weixin_49411859的博客
07-18 195
html部分： <canvas id="canvas" width="800" height="600"></canvas> js部分： class Clock { constructor(){ this.canvas = document.getElementById('canvas'); this.ctx = this.canvas.getContext('2d'); } init(){
利用canvas实现钟表效果
冰雪为融的博客
03-27 324
今天学习了基础的canvas，发现canvas很有意思，具体的知识点先不总结，等我学完了一起总结，先上一个自己写的小实例，嗯、直接上代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;钟表效果&lt;/title&a
Canvas制作时钟
GuanJdoJ的博客
08-13 694
一、预览 二、代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #mycanvas{ position: absolute; left:50%; m...
canvas画图-钟表
sdaulee的博客
04-15 268
调用了window.requestAnimationFrame(绘制函数)，然后在绘制函数中继续调用window.requestAnimationFrame(绘制函数)，这种情况下，每一次绘制都不能影响下一次，故需要在变换开始和结束的时候添加 ctx.save()/ctx.restore() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta...
canvas制作的简单时钟特效
suweim的博客
06-23 395
canvas时钟 #canvas{ border:1px solid #ccc; display:block; margin:0 auto; } 测试浏览器是否支持canvas var can=document.getElementById('canvas'); //设置宽度和高度 can.width=600; can.height=500; //获取
canvas实例—时钟效果
a595786041的博客
03-17 134
在本篇文章中，我们将利用canvas的知识来绘制一个时钟动画。 1、布局篇 1.1基础布局 首先我们在页面中放置一个canvas画布，将画布的颜色设置成#eee,宽高为400px。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
Canvas绘制一个时钟
秃头小桂子
05-11 2214
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
用python canvas制作一个动态钟表，附上代码
最新发布
06-06
好的，以下是使用Python的tkinter模块和canvas组件制作动态钟表的代码： ``` import tkinter as tk import time class Clock: def __init__(self, canvas, x, y, radius): self.canvas = canvas self.x = x ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值