Canvas画布实现自定义时钟效果

最新推荐文章于 2022-09-23 20:52:30 发布
最新推荐文章于 2022-09-23 20:52:30 发布
阅读量72 收藏
点赞数
原文链接：http://www.cnblogs.com/handsomehan/p/HTML5.html
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
	*{margin:0; padding:0; list-style:none;}
	.box{
		width: 420px;
		height: 420px;
		margin: 50px auto 0;
	}
	#cvs{
		background: #B1A6BE;
	}
</style>
</head>
<body>

	<div class="box">
		<canvas id="cvs" width="420" height="420"></canvas>
	</div>
	
<script>
var cvs=document.getElementById('cvs');
var ctx=cvs.getContext('2d');
clock();
setInterval(clock,1000);
function clock(){
	var img=document.createElement('img');
	img.src='01.jpg';
	//时钟背景图
	// img.οnlοad=function (){
		ctx.beginPath();
		ctx.drawImage(img,0,0,420,420);
		ctx.closePath();
	// }
	//时钟外圆
	ctx.beginPath();
	ctx.arc(210,210,200,0,2*Math.PI,true);
	ctx.strokeStyle='#60D9F8';
	ctx.lineWidth=10;
	ctx.stroke();
	ctx.clip();
	ctx.closePath();

	//分刻度 360/60=6
	for (var i = 0; i < 60; i++) {
		ctx.save();//保存状态
		ctx.beginPath();
		ctx.translate(210,210);
		ctx.rotate(i*6*Math.PI/180);
		ctx.strokeStyle='#FEF319';
		ctx.lineWidth=5;
		ctx.moveTo(0,-185);
		ctx.lineTo(0,-195);
		ctx.stroke();
		ctx.closePath();
		ctx.restore();//恢复之前保存的状态
	};

	//时刻度 360/12=30
	for (var i = 0; i < 12; i++) {
		ctx.save();//保存状态
		ctx.beginPath();
		ctx.translate(210,210);
		ctx.rotate(i*30*Math.PI/180);
		ctx.strokeStyle='#60D9F8';
		ctx.lineWidth=8;
		ctx.moveTo(0,-175);
		ctx.lineTo(0,-195);
		ctx.stroke();
		ctx.closePath();
		ctx.restore();//恢复之前保存的状态
	};

	//获取当前时间
	var dates=new Date();
	var h=dates.getHours();
	var m=dates.getMinutes();
	var s=dates.getSeconds();
	h=h+m/60;//12.5小时
	m=m+s/60;

	//画时间
	var h2=dates.getHours();
	var m2=dates.getMinutes();
	var str1=h2>9?h2:'0'+h2;
	var str2=m2>9?m2:'0'+m2;
	var str=str1+':'+str2;// 09:05
	ctx.beginPath();
	ctx.font='26px 微软雅黑';
	ctx.fillStyle='#5BDA40';
	ctx.fillText(str,180,340);
	ctx.closePath();

	//时针
	ctx.save();//保存状态
	ctx.beginPath();
	ctx.translate(210,210);
	ctx.rotate(h*30*Math.PI/180);
	ctx.strokeStyle='#60D9F8';
	ctx.lineWidth=8;
	ctx.moveTo(0,14);
	ctx.lineTo(0,-130);
	ctx.stroke();
	ctx.closePath();
	ctx.restore();//恢复之前保存的状态

	//分针
	ctx.save();//保存状态
	ctx.beginPath();
	ctx.translate(210,210);
	ctx.rotate(m*6*Math.PI/180);
	ctx.strokeStyle='#FEF319';
	ctx.lineWidth=5;
	ctx.moveTo(0,14);
	ctx.lineTo(0,-150);
	ctx.stroke();
	ctx.closePath();
	ctx.restore();//恢复之前保存的状态

	//秒针
	ctx.save();//保存状态
	ctx.beginPath();
	ctx.translate(210,210);
	ctx.rotate(s*6*Math.PI/180);
	ctx.strokeStyle='#FB1F11';
	ctx.lineWidth=3;
	ctx.moveTo(0,14);
	ctx.lineTo(0,-170);
	ctx.stroke();
	ctx.closePath();

	//秒针上的圆
	ctx.beginPath();
	ctx.fillStyle='#FEF319';
	ctx.strokeStyle='#FB1F11';
	ctx.lineWidth=3;
	ctx.arc(0,-155,5,0,2*Math.PI,true);
	ctx.fill();
	ctx.stroke();
	ctx.closePath();

	//中心圆
	ctx.beginPath();
	ctx.fillStyle='#FEF319';
	ctx.strokeStyle='#FB1F11';
	ctx.lineWidth=3;
	ctx.arc(0,0,8,0,2*Math.PI,true);
	ctx.fill();
	ctx.stroke();
	ctx.closePath();
	ctx.restore();//恢复之前保存的状态


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

　　

转载于:https://www.cnblogs.com/handsomehan/p/HTML5.html

weixin_33894992
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android自定义控件实现时钟效果
01-04
在学习安卓群英传自定义控件章节的时候，有一个例子是绘制时钟，在实现了书上的例子后就想看这个时钟能不能动起来。 这里选择延迟一秒发送消息重绘view来实现的动画，对外提供了开启时钟，关闭时钟的方法，当...
canvas 画简易时钟 （钟表时钟+数字时钟同步显示）
MarkJunHao的博客
08-04 2586
这次跟大家分享的是一个用canvas写的简易时钟，话不多说，直接上效果图： 下面是具体的代码： &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"&
使用Canvas(画布）完成一个时钟
guitarist0505的博客
07-17 7871
Canvas最初由苹果推出，后来由W3C推广，目前几乎所有浏览器都支持Canvas。 canvas是一个闭合标签，包括宽度和高度属性。默认值为宽300，高150。浏览器不支持canvas时，canvas的文本会显示，通常用来检测浏览器兼容性。 &lt;canvas id="can" width="300" height="300"&gt;您的浏览器不支持canvas&lt;/canvas&g...
Canvas实现自定义时钟
HYY的博客
04-04 699
实现效果 除了皮卡丘背景外的刻度线，时针分针秒针均是使用Canvas绘制出来的。 实现过程 设置基本大小及背景 1. 皮卡丘全脸素材 2. 基本结构 设置HTML结构如下： <div class="canvas-box"> <canvas width="300" height="300"></canvas> </div> 问题：这里为什么要外嵌一个div盒子呢？ 因为后续我们通过给div设置背景图片backgroun
使用canvas绘制动态时钟
吟游诗人——吟唱生命的不朽
01-17 429
本文参考：https://www.imooc.com/learn/612 先放一个运行动图给大家看看 此前未曾学过canvas，因觉着有趣便跟着课程学了一下，也对canvas有了更加深入的理解。 绘制时钟的几个步骤： 1、画表盘那个圆 2、画时钟边上那种小点 3、画1-2-3-4…-12这几个数字（本例子是从3-4-5-…-12-1-2） 4、画静态的指针 5、让指针动起来 6、在指针动起来后清...
h5：canvas绘制时钟
冲鸭
09-24 170
目录 一：顿一下 二：平滑 一：顿一下 <!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-s...
模拟时钟Myclock.ZIP
11-09
将自定义控件嵌入pagerview ，时钟指针用canvas.drawbitmap绘制，画布选择要注意下
html5-timepicker:HTML5画布时间选择器，灵感来自Windows 8警报应用程序。 适用于所有现代浏览器
05-01
HTML5画布时间选择器，灵感来自Windows 8警报应用程序。 可用作网站上的时间输入字段...centerX，centerY->定义时间选择器的自定义中心位置。 画布的中心是默认位置 animationStep->用于将处理程序动画化到其位置的
VanillaJS30Challenge:这是@wesbos的“ 30天香草JS编码挑战”项目的资料库，我有自己的更改
05-06
2-JavaScript和CSS时钟 3-CSS变量 4-阵列有氧运动第1天 5-柔性面板图库 6-提前输入 7-Array Cardio Day 2 8-HTML5画布带来的乐趣 9-开发工具统治 10-按住Shift键并选中复选框 11-自定义视频播放器 12-按键序列...
130个微信小程序源码（下）.zip
最新发布
06-24
地图定位-小程序完整demo：飞翔的小鸟：canvas实现，java后端(适用1221)-小程序官方Demo-小程序版2048-小程序页面生成器-康爱多微商城：学习界面设计-录音机-微票-我厨tab界面设计-手势解锁-排队取号，map组件使用-...
使用canvas实现简单的时钟效果
JiangLittleBai的博客
01-21 1648
这次要借助canvas实现时钟效果，展示当前时间，形状为圆形。 完整实现效果截图如上 关键点 时钟效果的实现主要分为3部分 1、绘制表盘、大小刻度、1~12 等静态部分的绘制 2、展示当前时间 3、时针、分针和秒针动起来 绘制静态部分 首先得到canvas和canvas的绘图环境 var canvas=document.getElementById("canv
用canvas制作一个实时钟表，指针随时间改变而转动
lcplayer的博客
09-23 535
利用canvas绘制的动态实时钟表，包含有钟表指针的绘制函数，随着时间变化指针会跳动
canvas 实现 简单钟表绘制
欢迎来到小屠的博客
04-05 2117
给大家分享一个canvas的时钟绘制 复制可直接使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> h1 { text-align: center; } di...
canvas画布画时钟(事件跟当前时间一样)
qq_44899153的博客
06-27 584
说明:代码里面的注释打开之后可以画出钟表的1-12时刻(在有背景图片是不需要打开) 效果图 1.关掉注释,有背景图 2.打开注释,无背景图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
Canvas绘制一个时钟
秃头小桂子
05-11 2160
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
html编写一个手绘时钟,用HTML/canvas实现一个时钟
weixin_39684960的博客
06-16 506
1.实现效果2.关于canvasHTML的canvas的相关内容可以看菜鸟教程的这篇文章。我主要是通过这篇文章来学习canvas的基础知识的。这个小项目也是参考了文章中附带的参考代码。https://www.runoob.com/w3cnote/html5-canvas-intro.html3.代码分析3.1 HTML部分用canvas标签创建一个500*500的画布你的浏览器不支持 canvas...
使用canvas绘制时钟
一只前端小白的博客
03-10 336
理论基础： 掌握canvas绘制圆形，以及绘制扇形的弧度计算（涉及三角函数），掌握canvas的动画基础和绘制图片》了解更多 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&
Canvas绘制时钟
发光的萤火虫
04-07 552
一、效果图展示 二、相关代码 1.clock.html 时钟 --> *{ padding:0; margin:0; } .canvas{ border:1px solid black; margin-top:20px;
js+Canvas实现时钟图，简单易懂
gisercug的博客
07-07 1382
本文主要参考canvas入门网址，加上自己理解将钟表图用原生js写出来，有两个难点 1.整个时钟的实现的难点和重点是save（）和restore（）的进栈 出栈，后进先出，理解的有点难，参考上面的网址很好理解，最后需要让第一个进栈的出栈 2， requestAnimFrame()这个函数，功能强大，类似于定时器，但其兼容性不好，之前没了解好，直接拿来用，结果导致了错误，具体优点可以参考这篇文章更...
canvas画布实现手写签名效果的示例代码
04-29
以下是一个简单的使用canvas画布实现手写签名效果的示例代码： HTML代码： ```html <canvas id="signature-canvas" width="400" height="200"></canvas> 清除 ``` JavaScript代码： ```javascript const canvas ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值