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 ...
随机推荐
- WIFI 国家码和信道划分
前言 网上百度了很多资料,都没有找到国家码对应支持哪些信道的资料,无奈只能qiang到谷歌,分享给大家完整的WIFI 国家码和信道划分. 安卓WIFI国家码的影响 android中设置wifi国家码的 ...
- 让绝对定位的div居中
最近看到一个问题就是让绝对定位的div居中,在尝试了top:50%:left:50%:后发现,居中是有问题的并不是想象中的样子 需要再加两句margin-top:-盒子高度的一般px margin- ...
- javascript之Banner图片焦点轮播
这个Banner唯一不好的就是没有前进和后退的button,写过两个版本的banner,这次这个是下面有浮动层的. <!DOCTYPE html><html xmlns=" ...
- 网络Devops探索与实践 流程管理分析师
https://mp.weixin.qq.com/s/OKLiDi78uB8ZkPG2kUVxvA 网络Devops探索与实践 王镇 鹅厂网事 2020-09-23 9月16日举办的2020 ODC ...
- https://design-patterns.readthedocs.io/zh_CN/latest/index.html
图说设计模式 - Graphic Design Patterns https://design-patterns.readthedocs.io/zh_CN/latest/index.html
- 游戏寻路A*算法
A*算法是一种启发式的BFS,目的就是找到到达目标位置的最短路径.启发式函数如下: f(x) = g(x) + h(x) g(x)是对出发点到达当前点距离的估约,h(x)是当前点到终点距离的估约.算法 ...
- 龙芯fedora28日常生存指南
2021-01-30 v0.0.5 从0.0.1开始改了非常多,一月余时间的花费渴望为其他人提供一点帮助,能够快速上手. 这主要是这一年来我从3B1500到3A4000再到福珑2的日常使用记录,是之前 ...
- IntelliJ Idea 解决 Could not autowire. No beans of 'xxxx' type found 的错误提示
IntelliJ Idea 解决 Could not autowire. No beans of 'xxxx' type found 的错误提示哈,在使用 @Autowired 时,今天又遇一坑,这俩 ...
- Language Guide (proto3) | proto3 语言指南（十五）生成类
Generating Your Classes - 生成类 要生成Java.Python.C++.Go.Ruby.ObjuleC或C代码,需要使用.proto文件中定义的消息类型,还需要在.proto ...
- 收集整理Idea常用配置及插件
收集整理Idea常用配置及插件 一.IDEA配置 1.1 代码智能提示,忽略大小写 二.IDEA插件 2.1 Background Image Plus 2.2 Codota-代码智能提示 2.3 S ...