用canvas实现钟表功能

最新推荐文章于 2023-06-07 17:23:32 发布
最新推荐文章于 2023-06-07 17:23:32 发布
阅读量411 收藏
点赞数 3
文章标签： canvas 钟表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangjianq_bobo/article/details/52949102
版权


用canvas实现一个钟表的功能，效果如下图：





<!DOCTYPE html>        

<html>

<head>

<metacharset="UTF-8">

<title></title>

</head>


<body>

<canvasid="myCanvas" width="1000" height="1000"></canvas>

</body>

<scripttype="text/javascript">

varmyCavans = document.querySelector("#myCanvas");

varcontext = myCanvas.getContext('2d');


functionclock() {

context.clearRect(0,0, 1000, 1000);

//获取当前的时间

varnow = new Date();

varsec = now.getSeconds();

varminute = now.getMinutes();

varhour = now.getHours();

hour= hour + minute / 60;

//表盘

varrGrd = context.createRadialGradient(200,200, 30, 200,200, 150);

rGrd.addColorStop(0, '#00ffff');

rGrd.addColorStop(1, '#0000ff');

context.fillStyle= rGrd;

context.fillRect(50,50, 300, 300);

// 表盘的原形边

context.beginPath();

context.lineWidth=2

context.strokeStyle= "white";

context.arc(200,200, 150, 0,2 * Math.PI, false);

context.fill();

context.stroke();


//大刻度

for(vari = 0; i < 12; i++) {

context.save();

context.lineWidth= 5;

context.strokeStyle= "white";

context.translate(200,200);

context.rotate(30* i * Math.PI / 180);

context.beginPath();

context.moveTo(0,-150);

context.lineTo(0,-140);

context.stroke();

context.restore();

}

//小刻度

for(vari = 0; i < 60; i++) {

context.save();

context.lineWidth= 2;

context.strokeStyle= "white";

context.translate(200,200);

context.rotate(6* i * Math.PI / 180);

context.beginPath();

context.moveTo(0,-150);

context.lineTo(0,-140);

context.stroke();

context.restore();

}


//数字

vardeg = 2 *Math.PI / 12;

context.save();

context.beginPath();

context.translate(200,200);

for(vari = 1; i < 13; i++) {

varx1 = Math.sin(i * deg);

vary1 = -Math.cos(i * deg);

context.fillStyle= "#fff";

context.font= "bold 20px Calibri";

context.textAlign= 'center';

context.textBaseline= 'middle';

context.fillText(i, x1* 120, y1 * 120);

}

context.closePath();

context.restore();

//秒针

context.save();

context.beginPath();

context.lineWidth= 2;

context.lineCap= "round";

context.strokeStyle= "red";

context.translate(200,200);

context.rotate(sec* 6 * Math.PI/ 180);

context.moveTo(0,-140);

context.lineTo(0,10);

context.stroke();

context.restore();

//分针

context.save();

context.beginPath();

context.lineWidth= 4;

context.lineCap= "round";

context.translate(200,200)

context.rotate(minute* 6 * Math.PI/ 180)

context.strokeStyle= "white";

context.moveTo(0,-120);

context.lineTo(0,10);

context.stroke();

context.restore();

//时针

context.save();

context.beginPath();

context.lineWidth= 6;

context.lineCap= "round";

context.translate(200,200)

context.rotate(hour* 30 * Math.PI/ 180)

context.strokeStyle= "black";

context.moveTo(0,-90);

context.lineTo(0,10);

context.stroke();

context.restore();

}

setInterval(clock,1000);

</script>


</html>

驴啃树皮
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Canvas绘制一个时钟
秃头小桂子
05-11 2247
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
使用canvas实现简单的时钟效果
JiangLittleBai的博客
01-21 1661
这次要借助canvas实现时钟效果，展示当前时间，形状为圆形。 完整实现效果截图如上 关键点 时钟效果的实现主要分为3部分 1、绘制表盘、大小刻度、1~12 等静态部分的绘制 2、展示当前时间 3、时针、分针和秒针动起来 绘制静态部分 首先得到canvas和canvas的绘图环境 var canvas=document.getElementById("canv
canvas绘制时钟
最新发布
qq_41985405的博客
06-07 187
canvas绘制时钟 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content='width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'></meta> </head&g
js+Canvas实现时钟图，简单易懂
gisercug的博客
07-07 1393
本文主要参考canvas入门网址，加上自己理解将钟表图用原生js写出来，有两个难点 1.整个时钟的实现的难点和重点是save（）和restore（）的进栈 出栈，后进先出，理解的有点难，参考上面的网址很好理解，最后需要让第一个进栈的出栈 2， requestAnimFrame()这个函数，功能强大，类似于定时器，但其兼容性不好，之前没了解好，直接拿来用，结果导致了错误，具体优点可以参考这篇文章更...
Canvas 画时钟
destiny'Note
11-30 5877
前言不管学习什么，不动手去做，永远不能熟练掌握。学习了 canvas API，会觉得只要按照直线、圆等画法去画，canvas 太简单了。可是，当你真正去画的时候，会遇到许多的问题。下面介绍的是 canvas 时钟，主要是与大家分享我的学习过程。 不懂 canvas 的同学，请先学习：Canvas 画布 一、相关几何知识钟面是一个圆，主要包含每个小时数字、以及刻度，它们的位置坐标应该如何计
利用canvas实现钟表效果
冰雪为融的博客
03-27 328
今天学习了基础的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实现简易时钟效果
kapeter的博客
08-25 1397
最终效果： 1、设置canvas环境，这一部分比较基础，不做详细展开。 var canvas=document.getElementById('myCanvas'); canvas.width= document.documentElement.clientWidth*0.75; canvas.height=document.documentElement.cl
html5 canvas实现时钟
01-08
使用html5中的canvas，结合javascript实现时钟效果
canvas实现钟表实时绘制
小勺挖泰山的博客
02-15 922
canvas实现钟表根据当前时间显示，效果如下图所示：【本文是参考文章https://www.cnblogs.com/zhaoliner/p/6098717.html写的】，但该文章还得稍加修改才能运行，所以直接写这篇文章，拷贝代码直接运行 代码如下： &lt;html&gt; &lt;head&gt; &lt;title&gt;Canvas tutorial&lt;/title...
canvas 实现自定义钟表
acoolgiser的博客
01-03 317
参考博客：https://www.cnblogs.com/liugang-vip/p/3557983.html 基于此博客自己实现的效果如下：修改了部分细节。 总结： 1. canvas的使用方法见 http://www.w3school.com.cn/tags/html_ref_canvas.asp 2. 特别需要注意的是画出指针以后如果要设置其样式，需要在restore()方法执行...
html5罗盘时钟
06-12
html5 罗盘时钟 使用html5开发 需要使用支持html5的浏览器 或者手机等
js date 加一天_web前端入门到实战：纯js时钟特效
weixin_39969060的博客
11-15 411
电子时钟是网上常见的功能，在学习date对象和定时器功能时，来完成一个电子时钟的制作是不错的选择。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。先准备一个html元素，用来放置时钟。新建一个div元素，它的id命名为clock，如下所示：<div id="clock" class="clock_con"></div><!-...
canvas-实现钟表
莫兮的博客
02-26 104
canvas-实现钟表 目录 文章目录前言推荐阅读思路解析代码实现结果观测 前言 模拟时钟的运行 推荐阅读 canvas基础 思路解析 主题有2种：表盘，表针 绘制表针 绘制表盘 运行 代码实现 class Click{ constructor(canvas){ this.c = document.getElementsByTagName(canvas)[0]; this.c.width = 300; this.c.height = 30
基于canvas实现钟表
baby_duoduo的博客
10-24 977
原理说明 1、通过arc方法实现钟表外环； 2、通过line实现钟表时针，分针，秒针和刻度标志的绘制，基于save和restore方法旋转画布绘制不同角度的指针； 3、通过font方法实现在画布上绘制文字，基于save和restore方法旋转绘制的文字，使文字正向显示。 实例效果图如下 绘制钟表圆形边框方法，centerX表示圆中心点x坐标，centerY表示圆中心店y坐标 function d...
记，罗盘时钟使用js实现
热门推荐
YouZi_X的博客
06-24 1万+
js+css完成罗盘时钟
自定义View绘制时钟
yujie0514的博客
12-02 219
package com.example.a04_clockview.clockview; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.os.Handler; i
canvas实现简单的时钟
weixin_42322307的博客
05-30 284
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Canvas Clock&lt;/title&gt; &lt;style type="text/css"&gt;   div{ text-align: center; marg
canvas绘制精细走动时钟
小圣贤君的博客
11-16 5330
这里简单了利用canvas做了一个时钟，能够实现分针和时针较精确的走动，没有太多难点，重点的是要实现分针和时针走动，角度的计算，笔者在下面进行说明。先看效果图： 颜色单配的比较难看，读者谅解。请看代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
Canvas 实现一个时钟
小鹏要逆袭的博客
08-02 1175
使用canvas实现另一个小时钟，效果图如下： 前端html代码： &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-widt
微信小程序使用canvas实现签名功能
06-01
是的，可以使用Canvas实现微信小程序的签名功能。以下是实现步骤： 1. 在wxml文件中添加Canvas标签，设置宽高和id属性，如： ```html <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值