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 ...
随机推荐
- 如何创建一个 PostgreSQL 数据库?
PostgreSQL 官网截图 PostgreSQL 是什么? PostgreSQL 是一个功能非常强大的,历史悠久,开源的关系数据库.PostgreSQL支持大部分的SQL标准并且提供了很多其他现代 ...
- 【1w字+干货】第一篇，基础：让你的 Redis 不再只是安装吃灰到卸载（Linux环境）
Redis 基础以及进阶的两篇已经全部更新好了,为了字数限制以及阅读方便,分成两篇发布. 本篇主要内容为:NoSQL 引入 Redis ,以及在 Linux7 环境下的安装,配置,以及总结了非常详细的 ...
- uni-app 开发随笔（踩坑记录）
这里总结一些uni-app开发时我遇到的坑 uni-app获取元素高度及屏幕高度(uni-app不可使用document) uni.getSystemInfo({ success: function( ...
- 使用Python的pandas模块、mplfinance模块、matplotlib模块绘制K线图
目录 pandas模块.mplfinance模块和matplotlib模块介绍 pandas模块 mplfinance模块和matplotlib模块 安装mplfinance模块.pandas模块和m ...
- （Sqlserver）sql求连续问题
题目一:create table etltable( name varchar(20) , seq int, money int); create table etltarget ( name var ...
- A1Z26 Cipher - Letter Number A=1 B=2 C=3 - Online Decoder, Translator https://www.dcode.fr/letter-number-cipher
A1Z26 Cipher - Letter Number A=1 B=2 C=3 - Online Decoder, Translator https://www.dcode.fr/letter-nu ...
- Python学习【第6篇】：集合的定义和基本方法
1.概念 (1)不同元素组成 例: s = {1,2,3,4,4,4,4,4,4}print(s)运行结果:{1, 2, 3, 4}因为是不同元素组成,因此去重了 (2)无序 例: s = {&quo ...
- Python学习【第5篇】：数据类型和变量总结
字符串,数字,列表,元组,字典 可变不可变 1.可变:列表 如: p.p1 { margin: 0; font: 11px Menlo; color: rgba(0, 0, 0, 1); backgr ...
- HBase与Zookeeper的关系
HBase与Zookeeper的关系 一.HBase与Zookeeper的关系 Zookeeper Client Master RegionServer 一.HBase与Zookeeper的关系 Cl ...
- Jenkins（5）生成allure报告
前言 jenkins集成了allure插件,安装插件后运行pytest+allure的脚本即可在jenkins上查看allure报告了. allure安装 在运行代码的服务器本机,我这里是用的dock ...