文档章节

canvas 绘制的简易时钟

见就别贱
 见就别贱
发布于 2017/06/29 18:56
字数 486
阅读 12
收藏 0
<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>钟表</title>
	<style>
		canvas{
			position:absolute;
			left:10;
			top:10;
		}
	</style>
	</head>
	<body>
	<canvas id="dial_canvas">表盘</canvas>
	<canvas id="hand_canvas">指针</canvas>

	<script>
		//定义变量
		var w = 600, h = 600; //画布的宽高
		var x = 300, y = 300; //圆心坐标
		var r = 200;     //半径

		//获取 canvas元素
		var dial_canvas = document.querySelector("#dial_canvas");
		dial_canvas.width = w;
		dial_canvas.height = h;

		var hand_canvas = document.querySelector("#hand_canvas");
		hand_canvas.width = w;
		hand_canvas.height = h;


		//获取绘图环境
		var dial_cxt = dial_canvas.getContext("2d");
		var hand_cxt = hand_canvas.getContext("2d");


		//绘制表盘
		dial_cxt.arc(x, y, r, 0, Math.PI * 2);
		dial_cxt.strokeStyle = "#000";
		dial_cxt.lineWidth = 10;
		dial_cxt.stroke();

		//绘制 小时 刻度
		drawScale(dial_cxt, x, y, r, r-20, 12, "#000", 10);

		//绘制 分钟刻度 
		drawScale(dial_cxt, x, y, r, r-10, 60, "#000", 4);


		//绘制指针
		function runTime(){

			
			hand_cxt.clearRect(0,0,w,h); //清空画布
			//hand_canvas.width = hand_canvas.width;

			//获取当前时间
			var date = new Date();

			//绘制秒针
			var s = date.getSeconds();
			drawHand(hand_cxt, x, y, s / 60 * 360, 180, 2, "red");

			//绘制分针
			var m = date.getMinutes() + s / 60;
			drawHand(hand_cxt, x, y, m / 60 * 360, 150, 5, "#000");


			//绘制时针
			var hour = date.getHours() % 12 + m / 60;
			drawHand(hand_cxt, x, y, hour / 12 * 360, 120, 8, "#000")
			
			setTimeout(runTime, 1000);
		}

		runTime();



		

		/**
         * 绘制指针
         * object cxt 绘图环境
         * number x 圆心x坐标
         * number y 圆心y坐标
         * number angle 偏移的角度
         * number handLength 指针的长度
         * number handWidth  指针的宽度
         * string handColor  指针的颜色 
		*/
		function drawHand(cxt, x, y, angle, handLength, handWidth = 10, handColor = "#000"){
			
			cxt.save();
			cxt.translate(x, y);
			cxt.rotate((angle - 90) / 180 * Math.PI);

			cxt.beginPath();
			cxt.moveTo(-20, 0);
			cxt.lineTo(handLength, 0);

			cxt.strokeStyle = handColor;
			cxt.lineWidth = handWidth;
			cxt.stroke();

			cxt.restore();
		}

		/**
         * 绘制刻度
         *  object cxt  绘图环境
		 *  nubmer x    圆心x坐标
		 *  nubmer y    圆心y坐标
		 *  number outerRadius  外圆半径
		 *  number innerRadius  内圆半径
		 *  number num  刻度的数量
		 *  number strokeStyle  刻度的颜色 默认值 #000
		 *  number strokeWidth   刻度的宽度 默认值 10
		*/
		function drawScale(cxt, x, y, outerRadius, innerRadius, num, strokeStyle = "#000", strokeWidth = 10) {
			//计算 间隔的角度(弧度)
			var angle = Math.PI * 2 / num;
			//相关设置
			cxt.beginPath();  //开启路径
			cxt.strokeStyle = strokeStyle;
			cxt.lineWidth = strokeWidth;

			//循环绘制
			for (var i = 0; i < num; i ++) {
				var x1 = Math.cos(angle * i) * outerRadius + x;
				var y1 = Math.sin(angle * i) * outerRadius + y;

				var x2 = Math.cos(angle * i) * innerRadius + x;
				var y2 = Math.sin(angle * i) * innerRadius + y;

				cxt.moveTo(x1, y1);
				cxt.lineTo(x2, y2);
			}


			cxt.stroke();  //进行绘制

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

© 著作权归作者所有

上一篇: VUE下跨域设置
下一篇: canvas高级
见就别贱
粉丝 1
博文 9
码字总数 3632
作品 0
温州
私信 提问
canvas制作主题可配置化,可拖拽时钟

最近学习了canvas之后,就用canvas制作了一个主题可配置化,可拖拽时钟。话不多说,直接看效果图: 具体的实现思路也很简单:首先绘制表盘,其次绘制时针分针秒针,然后获取时间进行渲染,最...

tiancai啊呆
2017/11/19
0
0
canvas中普通动效与粒子动效的实现

canvas用于在网页上绘制图像、动画,可以将其理解为画布,在这个画布上构建想要的效果。 canvas可以绘制动态效果,除了常用的规则动画之外,还可以采用粒子的概念来实现较复杂的动效,本文分...

薄荷前端
2018/12/29
0
0
Android自定义View:另一种实现手表指针转动的方法

在上一篇Android自定义View:如何实现一个模拟时钟?中我们实现了一款模拟时钟。在上一篇中,我们使用了Canvas中的canvas.rotate()方法让坐标系旋转从而绘制出指针。 但是,其实我们也可以使...

kinga22
2016/08/25
916
0
Python ——tkinter应用之时钟

  通常在电脑面前我们常常会关注的一个事物就是时钟,用tkinter模块中的画布组件也可以绘制出一个模拟的时钟。需要画出一个圆,时钟的秒针,分针和时针都是来自圆心的线,这些线指向我们的...

Python爱好者
2017/06/10
0
0
【canvas】js 绘制真实时钟

canvas绘制钟表 一、效果如图所示 二、详细设计过程 1. 分析 这个图形较为简单,使用的canvas api arc() 画圆 fillRect() 画矩形 fillText() 画字 2. 拆分 & 图层 图形虽简单,但由于涉及的图...

hans0000
07/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

parseint和isNaN用法

本文转载于:专业的前端网站➭parseint和isNaN用法 <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><script> var a='12'; alert......

前端老手
20分钟前
3
0
Kylin 精确去重在用户行为分析中的妙用

作者:史少锋,Apache Kylin committer & PMC,2019/10/11 在上次文章《如何在 1 秒内做到大数据精准去重》中,我们介绍了 Apache Kylin 为什么要支持大数据集上的精确去重,以及基于 Bitmap...

ApacheKylin
31分钟前
3
0
学习记录(二) es6基本语法(rest参数,模板化,axios模块,拦截器)

日常学习记录 模块化:把一个大文件分成多个小文件,按照一定规范进行拼接 es5写法: 导出:module.exports = 数据 导入:require("路径") /路径未添加后缀名时 //默认添加.js //把路径作为文件名...

Pole丶逐
35分钟前
3
0
以程序员的角度怎么购买一台「性价比高的电视」

前俩天有小伙伴在我的文章下留言,说能否把 【国内电视机都介绍一下】,今天我已在TV端开发多年的程序员的角度。谈谈已程序员的角度如何购买一台性价比高的电视。 国内大的电视机品牌介绍 长...

我们都很努力着
38分钟前
2
0
PhotoShop 色调:理解直方图/RGB通道信息

一、直方图:图表的形式,展示图像像素分布的情况 1.平均值:表示平均亮度 2.标准偏差值:表示亮度值范围内的中间值 3.像素: 表示用于计算直方图的像素总数 4.色阶:显示指针下面的区域亮度...

东方墨天
44分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部