canvas实现简易时钟效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
canvas.width = 500;
canvas.height = 500;
// canvas.style.background = '#000';
// canvas.style.border = "1px solid red";
var ctx = canvas.getContext('2d');
function clock(){
// -----获取实时时间
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
hour = hour > 12 ? (hour-12):hour;
// console.log(hour+":"+date.getMinutes()+":"+sec);
hour += (min/60);
min += (sec/60);
ctx.clearRect(0,0,canvas.width,canvas.height);
// -----画圆盘
ctx.beginPath();
ctx.arc(250,250,200,2*Math.PI,0);
ctx.strokeStyle = "#00FFFF";
ctx.lineWidth = 10 ;
ctx.stroke();
ctx.closePath();
// 裁剪成圆形
ctx.clip();
// 添加背景图片
var img = new Image();
img.src = "image/pic1.jpg"
ctx.drawImage(img,0,0,500,500);
// 添加文字
ctx.textBaseline = "top";
ctx.font = "20px 微软雅黑";
ctx.fillStyle = "#F00";
ctx.fillText("Made In China",180,370);
// 添加刻度数字
ctx.font = "20px 微软雅黑";
ctx.fillStyle = "#FF0";
ctx.fillText("12",238,75);
ctx.fillText("6",242,400);
ctx.fillText("3",410,238);
ctx.fillText("9",80,238);
//显示时间
ctx.font = "25px 微软雅黑";
ctx.fillStyle = "#000";
var str = date.getHours() +":"+date.getMinutes()+":"+date.getSeconds();
ctx.fillText(str, 200, 330);
// -----绘制小时刻度
ctx.save();
ctx.translate(250,250);
ctx.strokeStyle = "#FFFF00"
ctx.lineWidth = 7;
for(var x=0;x<12;x++){
ctx.beginPath();
ctx.moveTo(0,-195);
ctx.lineTo(0,-175);
ctx.stroke();
ctx.closePath();
ctx.rotate(30*Math.PI/180);
}
ctx.restore();
// -----绘制分钟刻度
ctx.save();
ctx.translate(250,250);
ctx.strokeStyle = "#FFFF00"
ctx.lineWidth = 5;
for(var x=0;x<60;x++){
ctx.beginPath();
ctx.moveTo(0,-195);
ctx.lineTo(0,-185);
ctx.stroke();
ctx.closePath();
ctx.rotate(6*Math.PI/180);
}
ctx.restore();
// -----画时针
ctx.save();
ctx.translate(250,250);
ctx.strokeStyle = "#00FFFF"
ctx.lineWidth = 7;
ctx.beginPath();
ctx.rotate(hour*30*Math.PI/180);
ctx.moveTo(0,10);
ctx.lineTo(0,-130);
ctx.stroke();
ctx.closePath();
ctx.restore();
// -----画分针
ctx.save();
ctx.translate(250,250);
ctx.strokeStyle = "#FFFF00"
ctx.lineWidth = 5;
ctx.beginPath();
ctx.rotate(min*6*Math.PI/180);
ctx.moveTo(0,10);
ctx.lineTo(0,-145);
ctx.stroke();
ctx.closePath();
ctx.restore();
// -----画秒针
ctx.save();
ctx.translate(250,250);
ctx.strokeStyle = "#FF0000"
ctx.lineWidth = 3;
ctx.beginPath();
ctx.rotate(sec*2*Math.PI/60);
ctx.moveTo(0,10);
ctx.lineTo(0,-160);
ctx.stroke();
ctx.closePath();
// 画小圆1
ctx.beginPath();
ctx.fillStyle = "#FFFF00";
ctx.strokeStyle = "#FF0000";
ctx.arc(0,0,7,0,2*Math.PI,0);
ctx.fill();
ctx.stroke();
ctx.closePath();
// 画小圆2
ctx.beginPath();
ctx.fillStyle = "#FFFF00";
ctx.strokeStyle = "#FF0000";
ctx.arc(0,-135,5,0,2*Math.PI,0);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
}
clock();
setInterval(clock,1000);
</script>
</body>
</html>效果
canvas实现简易时钟效果的更多相关文章
- canvas实现的时钟效果
最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之 ...
- canvas绘制简易时钟
时钟绘制的非常简易,但该有的都有了. 效果图如下, <!DOCTYPE html> <html> <head lang="en"> <me ...
- 基于canvas的原生JS时钟效果
概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
- 用canvas绘制一个简易时钟
在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...
- canvas自适应圆形时钟绘制
前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...
- transform实现的时钟效果
又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...
- 利用js+canvas实现的时钟效果图
canvas+js时钟特效 运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果: <!--网页文档的声明--> <!doctype html&g ...
- GDI绘制时钟效果，与系统时间保持同步，基于Winform
2018年工作之余,想起来捡起GDI方面的技术,特意在RichCodeBox项目中做了两个示例程序,其中一个就是时钟效果,纯C#开发.这个CSharpQuartz是今天上午抽出一些时间,编写的,算是偷 ...
- canvas炫酷时钟
canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...
随机推荐
- 三十三：WEB漏洞-逻辑越权之水平垂直越权
水平和垂直越权 水平越权:可以获得同级别用户权限 垂直权限:享受高几个层次的用户权限 解释,原理,检测,利用,防御 通过更换的某个ID之类的身份标识,从而使得A账号获取(修改,删除)B账号的数据,通过 ...
- 记一次ceph pg unfound处理过程
今天检查ceph集群,发现有pg丢失,于是就有了本文~~~ 1.查看集群状态 [root@k8snode001 ~]# ceph health detail HEALTH_ERR 1/973013 o ...
- Vue 标签Style 动态三元判断绑定
<div :style=" 1==1 ? 'display:block' : 'display:none' "></div> v-bind:style 的 ...
- JVM(五)手动解析.class文件
一:不同进制之间的转换 二进制:逢2进1,数字0-1. 八进制:逢8进1,数字0-7.三位二进制表示一位八进制.三位二进制最大为111,最大为7. 十进制:逢10进1,数字0-9.四位二进制表示一位十 ...
- compare-algorithms-for-heapqsmallest
Compare algorithms for heapq.smallest « Python recipes « ActiveState Code http://code.activestate.co ...
- java中List元素移除元素的那些坑
https://blog.csdn.net/javageektech/article/details/96668890 List 的迭代器类 采用倒序移除 jdk1.8的写法 public sta ...
- vscode远程开发安装
https://www.cnblogs.com/xiaoqi/p/vs-code-remote.html ============================= https://blog.csdn ...
- Maven环境搭建以及在IDEA中的配置与简单入门
目录 一.下载与安装 二.配置 1. 环境变量 2. 阿里云镜像 3. 本地仓库 三.IDEA创建Maven项目 1. 创建一个原始的Maven项目 1.2 指定模板创建(可选) 2. 配置GAV 3 ...
- HTML5的表单input元素的新属性
知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...
- eclipse 断点调试方法
1 Debug视图 1.1 线程堆栈视图 线程堆栈视图表示当前线程的堆栈,从中可以看出在运行哪些代码,并且整个调用过程,以及代码行号.分别介绍一下这几个按钮的含义.从左至右分别为: 1.表示当前实现继 ...