<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>风景时钟</title>

</head>

<body>

    <canvas id="canvas" width="405" height="405" style="border-radius:50%;"></canvas>

<script>

var canvas=document.getElementById('canvas');

var cxt=canvas.getContext('2d');

// 创建img图片对象，用drawImage方法，把图片放在画布上

// 代码中 用clip()方法裁剪图片

var img=new Image();

img.src="img/Hydrangeas.jpg";

img.onload=function(){

    // cxt.drawImage(img,0,0,405,405);

    clock();

    setInterval(clock,1000);

}

// 将所有代码用一个函数包起来

function clock(){

    // 获取时间

    var date=new Date();

    var hour=date.getHours();

    var min=date.getMinutes();

    var sec=date.getSeconds();

    hour=hour>12?hour-12:hour;//用三木运算符换算一下小时数

    hour=hour+(min/60);

    min=min+(sec/60);

    console.log(hour,min,sec)

    // 每秒执行前，清空一下画布，就不会照成磊加，重复的情况了

    cxt.clearRect(0,0,405,405);

    cxt.drawImage(img,0,0,405,405);//每次画布清空之后，把图片挂上去

    // 添加文字-----------------------------

    cxt.save();//保存以上状态

    cxt.font="20px 微软雅黑";

    cxt.textAlign="center";

    cxt.fillStyle="orangered";

    cxt.fillText("made in china",202.5,350);

    cxt.restore();

    // 添加时间文字

    cxt.save();

    cxt.fillStyle="white";

    cxt.font="18px w微软雅黑";

    cxt.textAlign="center";

    var txt=date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

    cxt.fillText(txt,202.5,320);

    cxt.restore();

    // 绘制时钟

    // 画圆盘

    cxt.save();

    cxt.strokeStyle="#00FFFF";

    cxt.lineWidth="10";

    cxt.beginPath();

    cxt.arc(202.5,202.5,200,0,2*Math.PI,false);//顺时针

    cxt.stroke();

    cxt.closePath();

    cxt.clip();//裁剪图片

    cxt.restore();

    // 画时刻度

    cxt.save();//保存此时的状态

    cxt.translate(202.5,202.5);//将画布原点移动到圆心点上

    cxt.strokeStyle="#ffff00";

    cxt.lineWidth=7;

    for(var i=0;i<12;i++){

        cxt.rotate(30*Math.PI/180)

        cxt.beginPath();

        cxt.moveTo(0,-195);

        cxt.lineTo(0,-175);

        cxt.closePath();

        cxt.stroke();

    }

    cxt.restore();//回到上次保存的状态

    // 画分刻度 60个

    // 将时刻度的代码拷贝过来，该一下数据

    cxt.save();

    cxt.translate(202.5,202.5);//将画布原点移动到圆心点上

    cxt.strokeStyle="#ffff00";

    cxt.lineWidth=5;//分刻度线条宽度为5，比是刻度细

    for(var i=0;i<60;i++){

        cxt.rotate(6*Math.PI/180)

        cxt.beginPath();

        cxt.moveTo(0,-195);

        cxt.lineTo(0,-185);

        cxt.closePath();

        cxt.stroke();

    }

    cxt.restore();

    // 画时针

    cxt.save();//保存起点坐标

    cxt.lineWidth="7";

    cxt.strokeStyle="#00ffff";

    cxt.translate(202.5,202.5);//将坐标点移到 圆心(旋转好操作)

    cxt.rotate(hour*30*Math.PI/180)//一小时 转30度

    cxt.beginPath();

    cxt.moveTo(0,-130);

    cxt.lineTo(0,-10);

    cxt.closePath();

    cxt.stroke();

    cxt.restore();

    // 画分针

    cxt.save();//保存起点坐标

    cxt.lineWidth="5";

    cxt.strokeStyle="#ffff00";

    cxt.translate(202.5,202.5);//将坐标点移到 圆心(旋转好操作)

    cxt.rotate(min*6*Math.PI/180)//一分钟转6度

    cxt.beginPath();

    cxt.moveTo(0,-150);

    cxt.lineTo(0,-10);

    cxt.closePath();

    cxt.stroke();

    cxt.restore();

    // 画秒针

    cxt.save();//保存起点坐标

    cxt.lineWidth="3";

    cxt.strokeStyle="#ff0000";

    cxt.translate(202.5,202.5);//将坐标点移到 圆心(旋转好操作)

    cxt.rotate(sec*6*Math.PI/180)//一秒钟转6度

    cxt.beginPath();

    cxt.moveTo(0,-170);

    cxt.lineTo(0,-10);

    cxt.closePath();

    cxt.stroke();

    // 画秒针上的小圆

    cxt.beginPath();

    cxt.arc(0,0,7,0,2*Math.PI);

    cxt.closePath();

    cxt.strokeStyle="#ff0000";

    cxt.fillStyle="#ffff00";

    cxt.fill();

    cxt.stroke();

    cxt.beginPath();

    cxt.arc(0,-140,7,0,2*Math.PI);

    cxt.closePath();

    cxt.strokeStyle="#ff0000";

    cxt.fillStyle="#ffff00";

    cxt.fill();

    cxt.stroke();

    cxt.restore();

}

// 执行一下

// clock();

// setInterval(clock,1000);

</script>

</body>

</html>

canvas风景时钟的更多相关文章

  1. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  2. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  3. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  4. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  6. canvas粒子时钟

    前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...

  7. canvas画时钟，重拾乐趣!

    canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...

  8. HTML5 Canvas爱心时钟代码

    这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...

  9. 用canvas绘制时钟

    用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...

随机推荐

  1. Codeforces 1240B. Sequence Sorting

    传送门 分析题目发现如果把某个数 $x$ 往左移,那么之后所有小于 $x$ 的数也都要往左移 如果把 $x$ 往右移,那么之后所有大于 $x$ 的数也都要往右移 考虑我们首先一定有一个操作 $n$ 次 ...

  2. 《深入理解 java 虚拟机》学习 -- 内存分配

    <深入理解 java 虚拟机>学习 -- 内存分配 1. Minor GC 和 Full GC 区别 概念: 新生代 GC(Minor GC):指发生在新生代的垃圾收集动作,因为 Java ...

  3. 怎样终止(杀掉) Linux 中的进程?

    使用 kill -9 进程号 命令, 可是强行终止该进程. 如果使用直接使用 kill 进程号 命令, 则会让进程 "自行了断" . 因此, 一般是 kill -9 进程号 用得较 ...

  4. mysql创建表空间和用户

    创建表空间名 create database 空间名 default character set utf8 collate utf8_bin; 创建用户create user 用户名 identifi ...

  5. prefixOverrides使用注意是事项

    不可以prefixOverrides=',' 否则执行的sql格式可能为 id ,time ,name... 导致sql报错,或者执行结果出错

  6. asp.net 8 Request,Response,Server

    Request成员: 1.Request.UrlReferrer 获取请求的来源,可以防盗链 Response.Write(Request.Url.ToString());//获取当前请求的URL地址 ...

  7. 记一次配置阿里云ECS GPU计算型gn5实例

    基础配置 CPU: Intel(R) Xeon(R) CPU E5-2682 v4 @ 2.50GHz * 16 MEM: 120 GiB GPU: NVIDIA P100 * 2 OS: Ubunt ...

  8. Express bodyParser中间件使用方式

    bodyParser中间件用来解析http请求体,是express默认使用的中间件之一. 1.这个模块提供以下解析器 (1) JSON body parser (2) Raw body parser ...

  9. JavaScript笔记(3)

    字典(Array对象) Array对象当字典使用时,.length属性就不能使用了 如果想访问对象元素,不能使用索引,只能使用key 如果遍历字典,只能使用for--in语句 字典是另一种可变容器模型 ...

  10. 第十四章·Kibana深入-Timelion画图实现系统监控

    什么是Timelion? Timelion使你可以轻松获得以下问题的答案: 1)随着时间的推移,每个唯一的用户会查看多少个页面?2)这个星期五和上周五之间的交通量有什么不同?3)今天有多少日本人口来到 ...