美丽的时钟

案例绘制一个时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>美丽的时钟</title>
		<script language="javascript">
			window.onload=function(){
			var clock=document.getElementById("clock");
			var cxt=clock.getContext("2d");
			
			function circle(r,color,w){
				cxt.lineWidth=w;//设置线条宽度
				cxt.strokeStyle=color;//设置线条颜色
				cxt.beginPath();//起始一条路径
				cxt.arc(250,250,r,0,360,false);//绘制曲线,圆心坐标为画布中心
				cxt.stroke();//绘制已定义的路径
			}
			function line(i){
				cxt.save();
				cxt.strokeStyle="#000";
				cxt.translate(250,250);
				cxt.rotate(i*6*Math.PI/180);
				cxt.beginPath();
				if(i%5==0){
					cxt.lineWidth=7;
					cxt.moveTo(0,-170);
				}else{
					cxt.lineWidth=5;
					cxt.moveTo(0,-180);
				}
				cxt.lineTo(0,-190);
				cxt.stroke();
				cxt.restore();
			}
			
			function needle(color,w,s,t,r){
				cxt.save();
				cxt.strokeStyle=color;
				cxt.lineWidth=w;
				cxt.translate(250,250);
				cxt.rotate(r*Math.PI/180);
				cxt.beginPath();
				cxt.moveTo(0,s);
				cxt.lineTo(0,t);
				cxt.stroke();
				cxt.restore();	
			}
			function preSec(r){
				cxt.save();
				cxt.lineWidth=2;
				cxt.strokeStyle="red";
				cxt.translate(250,250);
				cxt.rotate(r*Math.PI/180);
				cxt.beginPath();
				cxt.arc(0,-150,3,0,360,false);
				cxt.fillStyle="#808080";
				cxt.fill();
				cxt.stroke();
				cxt.restore();
			}
			function drawPoint(){
				var now =new Date();
				var h=now.getHours();
				h=h>12?h-12:h;
				var min=now.getMinutes();
				var sec=now.getSeconds();
				needle("#000",10,20,-60,(h*30+min/60*30));
				needle("#808080",6,30,-90,min*6);
				needle("red",2,35,-180,sec*6);
				preSec(sec*6);
			}
			function draw(){
				cxt.clearRect(0,0,500,500);
				circle(200,"blue",7);
				for(var i=0;i<60;i++){
					line(i);
				}
				drawPoint();
				circle(10,"red",2);
				circle(3,"red",3);
			}
			setInterval(function(){
				draw();
			},1000);
			}
				</script>	
	</head>
	<body>
		<canvas width="500" height="500" id="clock">
			您的浏览器不支持该标签
	</body>
</html>

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/207565.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

你需要知道所有设计模式吗?

后续我会详细展开设计模式 &#x1d5d7;&#x1d5fc; &#x1d5ec;&#x1d5fc;&#x1d602; &#x1d5e1;&#x1d5f2;&#x1d5f2;&#x1d5f1; &#x1d5e7;&#x1d5fc; &#x1d5de;&#x1d5fb;&#x1d5fc;&#x1d604; &#x1d5d4;&#x1d5f9;&…

溜冰场电脑收银系统软件会员管理操作教程,佳易王溜冰场会员卡管理软件下载

溜冰场电脑收银系统软件会员管理操作教程&#xff0c;佳易王溜冰场会员卡管理软件下载 一、软件 部分功能简介&#xff1a; 1、会员信息登记 &#xff1a;可以直接使用手机号登记&#xff0c;也可以使用实体卡片&#xff0c;推荐用手机号即可。 2、会员卡类型 &#xff1a;可…

Redis:事务操作

目录 Redis事务定义相关命令事务的错误处事务冲突的问题Redis事务三特性 Redis事务定义 redis事务是一个单独的隔离操作&#xff0c;事务中的所有命令都会序列化、按顺序地执行&#xff0c;事务在执行的过程中&#xff0c;不会被其他客户端发送来的命令请求所打断。 redis事务…

HTAP 还可以这么玩?丨TiDB 在 IoT 智慧园区的应用

作者&#xff1a;某物联网公司设施云平台负责人 用户简介&#xff1a;我们是一家提供全链智慧园区整体解决方案的物联网公司&#xff0c;致力于打造可持续发展的智慧园区。 基础设施平台简介 基础设施平台是集团一线作业人员日常工作中高度依赖的重要系统&#xff0c;涵盖了各…

涉密计算机违规外联原因及防范措施

高度信息化的时代&#xff0c;涉密计算机违规外联已成为一种严重的安全威胁。涉密计算机违规外联是指涉密计算机通过互联网、电子邮件等方式与外部计算机或网络进行连接&#xff0c;导致机密信息泄露或被恶意攻击。 为了应对这一问题&#xff0c;本文将探讨涉密计算机违规外联的…

WPF实战项目十九(客户端):修改RestSharp的引用

修改HttpRestClient&#xff0c;更新RestSharp到110.2.0&#xff0c;因为106版本和110版本的代码不一样&#xff0c;所以需要修改下代码 using Newtonsoft.Json; using RestSharp; using System; using System.Threading.Tasks; using WPFProjectShared;namespace WPFProject.S…

wps备份功能 救了我一命

感谢wps备份功能 救了我一命 文章目录 感谢wps备份功能 救了我一命**&#x1f4dd;场景回现&#xff0c;往后再不干了**&#x1f9e3;灵光一现&#x1f4c7;备注中心的设置流程&#x1f58a;️最后总结 &#x1f4dd;场景回现&#xff0c;往后再不干了 小&#x1f42e;今天接到…

理解BatchNormalization层的作用

深度学习 文章目录 深度学习前言一、“Internal Covariate Shift”问题二、BatchNorm的本质思想三、训练阶段如何做BatchNorm四、BatchNorm的推理(Inference)过程五、BatchNorm的好处六、机器学习中mini-batch和batch有什么区别 前言 Batch Normalization作为最近一年来DL的重…

Spring Task

1 介绍 Spring Task 是Spring框架提供的任务调度工具&#xff0c;可以按照约定的时间自动执行某个代码逻辑。 定位&#xff1a;定时任务框架 作用&#xff1a;定时自动执行某段Java代码 为什么要在Java程序中使用Spring Task&#xff1f; 应用场景&#xff1a; 1). 信用卡…

MyBatis-Plus动态表名使用selectPage方法不生效问题解析与解决

文章目录 MyBatis-Plus动态表名简介selectPage方法不生效的问题解决方案&#xff1a;SqlParser注解与BaseMapper的selectPage方法示例代码实体类Mapper接口Service层Controller层 总结 &#x1f389;MyBatis-Plus动态表名使用selectPage方法不生效问题解析与解决 ☆* o(≧▽≦)…

【每日OJ —— 144. 二叉树的前序遍历】

每日OJ —— 144. 二叉树的前序遍历 1.题目&#xff1a;144. 二叉树的前序遍历2.方法讲解2.1.算法讲解2.2.代码实现2.3.提交通过展示 1.题目&#xff1a;144. 二叉树的前序遍历 2.方法讲解 2.1.算法讲解 1.首先如果在每次每个节点遍历的时候都去为数组开辟空间&#xff0c;这样…

linux基础五:linux 系统(进程状态2:)

linux 系统 一.进程状态&#xff1a;1.睡眠状态(sleep)&#xff1a;2.磁盘休眠状态(disk sleep)&#xff1a;3.停止状态(stoped --- T)&#xff1a;4.死亡状态&#xff1a;5.控制状态&#xff08;t&#xff09; 二.僵尸进程和孤儿进程&#xff1a;1.僵尸状态&#xff1a;2.孤儿…

同城服务足浴按摩软件系统开发方案;

足浴按摩软件是一款线上系统小程序&#xff0c;旨在方便用户在线预约按摩师、选择适合自己的服务项目和时间&#xff0c;并在家中或指定地点享受按摩服务。这款上门按摩小程序为用户提供了便利和个性化的按摩服务体验。 用户可以通过手机随时随地通过足浴按摩软件预约按摩师&am…

【java】编译时bug 项目启动前bug合集

文章目录 1. jdk8中 Optional orElseThrow 编译时报错java: 未报告的异常错误X; 必须对其进行捕获或声明以便抛出2. 启动项目时提示 Error running Application: Command line is too long. Shorten command line for Application or also for Spring Boot default configurati…

【每日OJ —— KY11 二叉树遍历】

每日OJ —— KY11 二叉树遍历 1.题目&#xff1a;KY11 二叉树遍历2.解法2.1.算法讲解2.2.代码实现2.3.提交通过展示 1.题目&#xff1a;KY11 二叉树遍历 2.解法 2.1.算法讲解 1.首先需要创建二叉树结构。 2.其次&#xff0c;根据题目根据题目遍历的顺序要求来实现构建二叉树的…

基于mps的pytorch 多实例并行推理

背景 大模型训练好后&#xff0c;进行部署时&#xff0c;发现可使用的显卡容量远大于模型占用空间 。是否可以同时加载多个模型实例到显存空间&#xff0c;且能实现多个实例同时并发执行&#xff1f;本次实验测试基于mps的方案&#xff0c;当请求依次过来时&#xff0c;多个相…

【分布式事务】Seata 开源的分布式事务解决方案

1. 什么是seata Seata 是一款开源的分布式事务解决方案&#xff0c;致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式&#xff0c;为用户打造一站式的分布式解决方案。 2. seata发展历程 阿里巴巴作为国内最早一批进行应用分…

使用 CSS Grid 的响应式网页设计:消除媒体查询过载

文章目录 前言介绍 CSS Grid让我们开始吧实现高级响应性1、Repeat() 2、Auto-fit3、Minmax()结论 前言 你是否厌倦了在实现响应式网站时需要管理多个媒体查询&#xff1f;说再见复杂的代码&#xff0c;拥抱更简单的解决方案吧&#xff1a;CSS Grid。 在这篇文章中&#xff0c;…

AI时代架构师之路:技术、洞察和创新的完美融合

随着人工智能技术的飞速发展&#xff0c;我们正置身于一个由数据驱动的时代。在这个充满无限可能性的AI时代&#xff0c;架构师成为设计和构建先进系统的关键角色。然而&#xff0c;在追逐技术的同时&#xff0c;架构师需要修炼一系列综合素养&#xff0c;使其在技术、业务和伦…

苍穹外卖——删除购物车信息

1. 删除购物车中一个商品 1.1 产品原型 1.2 接口设计 1.3 数据模型 shopping_cart表&#xff1a; -- auto-generated definition create table shopping_cart (id bigint auto_increment comment 主键primary key,name varchar(32) null comment 商品名称…