html5 画布绘制时钟
用Html5实现时钟,包括转盘时钟和电子时钟,显示当前日期时间
绘制步骤:
(1)先获取画布,设置画布的大小;
(2)在js中获取画布对象,获取画布的画笔对象,设置画笔的一些属性;
(3)获取系统当前时间,转换成时分秒,用变量保存下来;
(4)先画分钟刻度线,每6°画一条线,共60条刻度线(循环);
(5)画时钟刻度线,每30°画一条线,相对分针长一点粗一点,共12条线
(6)画时针、分针和秒针,时针最短最粗,秒针最细最长,根据当前时间把时针,分针,秒针旋转到相应位置;
(7)接着绘制数字时钟,根据当前的时间在画布上绘制文字,显示时间日期(年月日)星期几;
(8)调用函数,并设置定时器定时执行函数,实现动态效果。
效果图:
源代码:
<!DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style type="text/css">
canvas{
margin: 100px 80px;
}
</style>
</head>
<body>
<canvas id="clock"width="1000" height="200"></canvas>
<scripttype="text/javascript">
var canvas =document.querySelector("canvas");
canvas.style.background ="blue";
var g = canvas.getContext("2d");
//绘制转盘时钟
function drawArcClock() {
g.clearRect(0, 0, 100, 100);
var data = new Date();
var sec = data.getSeconds();
var min = data.getMinutes();
var hour = data.getHours();
g.save();
g.translate(50, 50);
g.rotate(-Math.PI / 2);
//分钟刻度线
for(var i = 0; i < 60; i++) {//画60个刻度线
g.beginPath();
g.strokeStyle ="white";
g.lineWidth = 1;
g.moveTo(50, 0);
g.lineTo(45, 0);
g.stroke();
g.rotate(Math.PI / 30); //每个6deg画一个时钟刻度线
g.closePath();
}
//时钟刻度线
for(var i = 0; i < 12; i++) {//画12个刻度线
g.beginPath();
g.strokeStyle ="white";
g.lineWidth = 2;
g.moveTo(50, 0);
g.lineTo(40, 0);
g.stroke();
g.rotate(Math.PI / 6); //每个30deg画一个时钟刻度线
g.closePath();
}
//画时针
hour = hour > 12 ? hour - 12 :hour;
g.beginPath();
g.save();
g.rotate(Math.PI / 6 * hour +Math.PI / 6 * min / 60 + Math.PI / 6 * sec / 3600);
g.strokeStyle = "white";
g.lineWidth = 3;
g.moveTo(-10, 0);
g.lineTo(30, 0);
g.stroke();
g.restore();
g.closePath();
//画分针
g.beginPath();
g.save();
g.rotate(Math.PI / 30 * min +Math.PI / 30 * sec / 60);
g.strokeStyle = "white";
g.lineWidth = 2;
g.moveTo(-5, 0);
g.lineTo(30, 0);
g.stroke();
g.restore();
g.closePath();
//画秒针
g.beginPath();
g.save();
g.rotate(Math.PI / 30 * sec);
g.strokeStyle = "red";
g.lineWidth = 1;
g.moveTo(-10, 0);
g.lineTo(35, 0);
g.stroke();
g.restore();
g.closePath();
g.restore();
}
//绘制数字时钟
function drawNumClock(){
g.clearRect(100, 0, 1200, 200);
var data = new Date();
var str = data.getFullYear()+"年"+(data.getMonth()+1)+"月"+data.getDate()+"日";
var sec = data.getSeconds();
var min = data.getMinutes();
var hour = data.getHours();
var day =data.getDay(); //获取当前星期
if(day == 0){
day = "日";
}
else if(day==1){
day = "一";
}
else if(day==2){
day = "二";
}
else if(day==3){
day = "三";
}
else if(day==4){
day = "四";
}
else if(day==5){
day = "五";
}
else if(day==6){
day = "六";
}
g.fillStyle = "white";
g.font = "100px '楷体'";
g.lineWidth = "bolder";//字体加粗
g.beginPath();
g.fillText(hour,200,120);
g.fillText(":",300,110);
g.fillText(min,340,120);
g.font = "70px '楷体'";
g.fillText(sec,470,120);
g.font = "70px '楷体'";
g.fillText("星期",580,120);
g.fillText(day,730,120);
g.font = "50px '楷体'";
g.fillText(str,580,180);
}
drawArcClock();
drawNumClock();
setInterval(drawArcClock, 1000);
setInterval(drawNumClock, 1000);
</script>
</body>
</html>
html5 画布绘制时钟相关推荐
- html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
- html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: canvas绘图 JavaScript部分: function init() ...
- html5贝塞尔,使用HTML5画布绘制贝塞尔曲线
是的,请使用HTML canvasbezierCurveTo()方法在HTML5中绘制Bezier曲线. 示例 您可以尝试运行以下代码以使用画布绘制贝塞尔曲线:HTML> #test { wid ...
- Three.js 粒子系统动画与发光材质——利用HTML5画布绘制
用Three.js做了个字体的粒子系统动画,且`自定义性`极高,设置speedX=speedY=speedZ=1000的参数,截图如下: 预览地址:https://joeoeoe.github.io/ ...
- canvas 画布绘制时钟
利用canvas绘制时钟的一个小demo <!--* @Author: 164591357@qq.com 164591357@qq.com* @Date: 2022-08-06 11:04:07 ...
- 如何用html5绘制圆形图片,javascript – 如何使用html5画布绘制连续的圆形图案
我有这个图像: 我想用图像作为模式绘制.当我在画布上得到一个像这样的结果: 但我需要输出 所以我的问题是: JS var source, source_ctx, sleeve, sleeve_ctx, ...
- html5画布绘制微信logo,HTML5新特性之用SVG绘制微信logo
HTML5新特新 HTML5 中的一些有趣的新特性: 1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的更好的支持 4.新的特殊内容元素,比 ...
- html 绘制正方形,使用HTML5画布绘制正方形
打开记事本写下以下代码: var square=a.getContext("2d");//这里通过square获取处理API的上下文contextsquare.beginPath( ...
- Html5画布绘制七巧板
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
最新文章
- c语言逆序输出字符串指针,菜鸟求助-如何用指针法将一串字符按单词的倒序输出?如:i love yo...
- Linux 操作系统原理 — Namespace 资源隔离
- 动态变量和静态变量的区别,堆和栈的区别
- 【杂谈】计算机视觉在人脸图像领域的十几个大的应用方向,你懂了几分?
- background-position—CSS设置背景图片的位置
- java加载xml配置文件_java读取配置文件的几种方法
- mysql中varchar的存储_mysql的varchar可以存储多少个汉字
- Java应用程序的令牌认证
- LeetCode--85.最大矩形(单调栈)
- 圆角ImageView
- android 自定义时间对话框,android自定义日期和时间选择对话框得实现
- 跨境电商shopify独立站如何引流量
- 文件摆渡是什么意思_数据摆渡是什么意思?如何确保安全性?
- STC学习:串口通信
- 维纳滤波python 函数_Wiener维纳滤波基本原理及其算法实现
- 支持嵌入的手机号码识别sdk软件
- matlab x~=0
- imu可视化和frame_id的查询
- 使用JS 实现 分享到 新浪微博 QQ 空间
- IDear 创建web项目