用html5制作闹钟,HTM5制作的闹钟
your broswer can not see the clock
var clock = document.getElementById("Clock");var cxt = clock.getContext("2d");
function DrawClock() {//clear canvas //要先清空画布,才能保持画面的动画效果
cxt.clearRect(0, 0, 500, 500);
cxt.font= "20px Blackadder ITC";
cxt.fillText("My clock", 220, 150);
cxt.font= "14px Blackadder ITC";
cxt.fillText("---Made by Lan", 240, 170);var image = newImage();
image.src= "1.png";
cxt.drawImage(image,220, 280, 100, 100);var now = newDate();var sec =now.getSeconds();var min =now.getMinutes();var hour = now.getHours(); //must be hour+ min/60
hour = hour + min / 60;
hour= hour > 12 ? hour - 12: hour;//round, scale, niddle
cxt.beginPath();
cxt.arc(250, 250, 200, 0, 360, false);
cxt.strokeStyle= "#ABCDEF";
cxt.lineWidth= 9;
cxt.stroke();
cxt.closePath();//scale 刻度,时刻
cxt.font = "30px Bold";for (var i = 0; i < 12; i++) {
cxt.save();
cxt.lineWidth= 7;
cxt.strokeStyle= "Black";
cxt.translate(250, 250);
cxt.rotate(i* 30 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -170);
cxt.lineTo(0, -190);if (i == 0) {
cxt.fillText("12", -10, -145);
}else{
cxt.fillText(i.toString(),-10, -145);
}
cxt.stroke();
cxt.closePath();
cxt.restore();
}
// 分for (var j = 0; j < 60; j++) {
cxt.save();
cxt.lineWidth= 4;
cxt.translate(250, 250);
cxt.rotate(j* 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -180);
cxt.lineTo(0, -190);
cxt.strokeStyle= "Black";
cxt.stroke();
cxt.closePath();
cxt.restore();
}
cxt.beginPath();
cxt.save();
cxt.lineWidth= 7;
cxt.strokeStyle= "Black";
cxt.translate(250, 250);
cxt.rotate(hour* 30 * Math.PI / 180);
cxt.moveTo(0, -150);
cxt.lineTo(0, 10);
cxt.stroke();
cxt.restore();
cxt.closePath();
cxt.beginPath();
cxt.save();
cxt.lineWidth= 5;
cxt.strokeStyle= "Black";
cxt.translate(250, 250);
cxt.rotate(min* 6 * Math.PI / 180);
cxt.moveTo(0, -130);
cxt.lineTo(0, 10);
cxt.stroke();
cxt.restore();
cxt.closePath();
cxt.beginPath();
cxt.save();
cxt.lineWidth= 3;
cxt.strokeStyle= "red";
cxt.fillStyle= "Black";
cxt.translate(250, 250);
cxt.rotate(sec* 6 * Math.PI / 180);//秒
cxt.moveTo(0, 150);
cxt.lineTo(0, -15);
cxt.stroke();
cxt.beginPath();
cxt.arc(0, 0, 5, 0, 360, false);
cxt.fillStyle= "gray";
cxt.strokeStyle= "red";
cxt.fill();
cxt.closePath();
cxt.beginPath();
cxt.arc(0, 130, 5, 0, 360, false);
cxt.fillStyle= "black";
cxt.strokeStyle= "red";
cxt.fill();
cxt.stroke();
cxt.restore();
cxt.closePath();
}
DrawClock();
setInterval(DrawClock,1000);
用html5制作闹钟,HTM5制作的闹钟相关推荐
- 制作html相册需要什么环境,html5和CSS3怎么制作一个相册
html5和CSS3怎么制作一个相册 发布时间:2021-01-25 10:23:25 来源:亿速云 阅读:78 作者:小新 这篇文章主要介绍了html5和CSS3怎么制作一个相册,具有一定借鉴价值, ...
- 微信html5电子相册,如何快速制作微信H5电子相册?
电子相册的用途有很多种,常见的就是毕业相册.结婚相册.个人相册以及旅游相册,而用传统方式制作出来的电子相册精美度以及方便性都比较差,所以现在人们一般都是通过微信H5制作平台来制作电子相册的,制作步骤如 ...
- 抖音上css照片动态旋转怎么做,抖音里单张图片平移视频怎么制作?影音制作实现一张图片从左到右滑动视频效果...
今天的影音制作,是实现视频画面中有一张图片从左往右慢慢滑动的视频效果.一张横屏图片要制作成竖视频的时候,要么就会出现图片显示不全的情况,要么显示全了就会出现上下有黑边的情况,基本很难解决这个问题~但是 ...
- php图片滑动怎么做,抖音里单张图片平移视频怎么制作?影音制作实现一张图片从左到右滑动视频效果...
今天的影音制作,是实现视频画面中有一张图片从左往右慢慢滑动的视频效果.一张横屏图片要制作成竖视频的时候,要么就会出现图片显示不全的情况,要么显示全了就会出现上下有黑边的情况,基本很难解决这个问题~但是 ...
- jquery实现app开发闹钟功能_趣味闹钟APP开发,随意切换闹钟叫醒功能
智能手机端的发展使得人们获取外界信息更加高效,然而智能手机的出现也有一定的弊端,生活中很多人常常因为浏览手机信息而选择熬夜,早起自然也就成为了一种困难,而趣味闹钟APP开发或多或少可以帮助用户解决问题 ...
- 计算机动画制作 实验要求,A074计算机动画制作实验——动画制作初步
计算机动画制作实验--动画制作初步 计算机动画制作实验--动画制作初步 设计者 庞岩 单位 海南海口实验中学 e_mail technic88@http://doc.xuehai.net 案例名称 计 ...
- java 闹钟代码_JAVA可视化闹钟源码
1 packageClock;2 3 importsun.audio.AudioPlayer;4 importsun.audio.AudioStream;5 6 import javax.swing. ...
- deepinu盘制作工具_u盘启动盘制作工具怎么制作 u盘启动盘制作工具制作方法【详细步骤】...
在电脑城很多技术人员都会使用u盘装系统的方法给用户电脑安装系统,他们是怎么操作的呢?其实很简单,就是通过u盘启动盘来安装系统的.而u盘启动盘是需要用 u盘启动盘制作工具 来制作的.那么问题又来了,u盘 ...
- SubstanceDesigner制作PBR材质制作并且同步到Unity小尝试
SubstanceDesigner制作PBR材质制作并且同步到Unity小尝试 1.下载安装SubstanceDesigner,网址:https://zixue.3d66.com/softhtml/d ...
最新文章
- 吃鸡服务器炸了会显示什么,绝地求生服务器再爆炸,还能不能好好吃鸡了?
- 如何搞定SVN目录的cleanup问题和lock问题
- [原]Oracle删除大表并回收空间的过程
- deep$wide keras
- pytorch 之 torch.eye()函数
- 蓝桥杯 ALGO-31 算法训练 开心的金明
- java生成二维码读取二维码,面试真题解析
- 设置response.setContentType(“application/json;charset=utf-8“)后还是中文乱码
- java用XSSFWorkbook实现读写Excel
- 一次ajax请求返回状态为Cancled的记录
- stm32开发3D打印机(一)——介绍(已完成)
- MySQL处理生意参谋_生意参谋低点击率怎么处理?
- 微机原理是微型计算机与接口技术吗,《微机原理与接口技术》课程教学大纲
- java宽度优先搜索之八数码,广度优先搜索解决八数码问题
- 拆分单元格怎么弄?合并起来了怎么办?
- xxl-job整合到微服务
- 美化你的Typora
- PCI GXL学习之再造篇
- Python IDEL查询和修改当前目录
- 输出一个 n 阶的方阵
热门文章
- linux缺页异常,操作系统缺页异常
- Excel如何快速提取单元格括号内数据
- 聚观早报|百度3月16日发布文心一言;特斯拉被控维修和零部件垄断
- 计算机往届生考研失败找工作,考研二战失败如何找工作 考研往届生找工作的方法...
- RefSeq Protein Accession转换为蛋白质(YP_009227197转换成Protein)
- android edittext 输入法表情,Android开发中EditText禁止输入Emoji表情符
- 【FPGA】:ip核---乘法器(multiplier)
- Python | Python保存高维数组array,Python用pandas将numpy保存csv文件,Python保存3维数组
- 用 .pth 文件附加 Python 模块搜索路径
- xshell双击无反应