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 ...
随机推荐
- Sentry(v20.12.1) K8S 云原生架构探索，JavaScript Enriching Events(丰富事件信息)
系列 Sentry-Go SDK 中文实践指南 一起来刷 Sentry For Go 官方文档之 Enriching Events Snuba:Sentry 新的搜索基础设施(基于 ClickHous ...
- 阿里云 CentOS7中搭建FTP服务器
1配置 vsftpd-3.0.2-27.el7.x86_64 阿里云 centos 7.0 2 ftp工作模式 2.1 ftp通道 ftp工作会启动两个通道: 控制通道,数据通道 在ftp协议中,控制 ...
- windows激活密钥
密钥来源,微软官方 KMS 客户端安装密钥 | Microsoft Docs Windows Server 2008 R2 操作系统版本 KMS 客户端安装程序密钥 Windows Server 20 ...
- Boyer-Moore 投票算法
Boyer-Moore 投票算法 http://theory.stanford.edu/~trevisan/cs154-12/notestream.pdf 众数
- 前置时间（Lead Time），也称前置期、备货周期
https://wiki.mbalib.com/wiki/前导时间 什么是前导时间 所谓的前导时间(leading time),就是产品从设计,到生产.物流.销售的过程. BELLWETHER:&qu ...
- NULL-safe equal null 索引 空字符串
小结 1. mysql> INSERT INTO my_table (phone) VALUES (NULL); 有手机号但是不知道 mysql> INSERT INTO my_table ...
- 004_C++常见错误类型总结（一）之最后几行错误
1.介绍 经常进行代码测试和静态代码分析的同学,应该会遇到这样的一个问题,就是一个程序段的最后几行,或者一个源文件末尾会出现错误.本文,结合专业的静态代码分析软件PSV-Studio提供错误类型代码库 ...
- Java内存溢出处理
在解决java内存溢出问题之前,需要对jvm(java虚拟机)的内存管理有一定的认识. jvm管理的内存大致包括三种不同类型的内存区域:Permanent Generation space(永久保存区 ...
- Spring框架——IOC&DI
Spring Spring 目标 内容 Spring与web整合的原理 Spring 中包含的关键特性 Spring架构图 企业级框架 企业级系统 IOCDI IOC DI IOC和DI 为什么使用依 ...
- Java 复习整理day04
在我们的日常生活中,方法可以理解为要做某件事情, 而采取的解决办法. 如:小明同学在路边准备坐车来学校学习.这就面临 着一件事情(坐车到学校这件事情)需要解决,解决办法 呢?可采用坐公交车或坐出租车的 ...