<!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. Tomcat中的服务器组件和 服务组件

    开始学习Tocmat时,都是学习如何通过实例化一个连接器 和 容器 来获得一个Servlet容器,并将连接器  和 servlet容器相互关联,但是之前学习的都只有一个连接器可以使用,该连接器服务80 ...

  2. StoneTab标签页CAD插件 2.6.0

    1.纯属自娱自乐,未做过多的测试: 2.理论上可以用在CAD2010-2012版本,自己用的是WIN10 64位,CAD2012,其他未过测试: 3.尚未打算支持其他版本CAD,主要是电脑只能装WIN ...

  3. Ef数据GroupBy多字段查询Vb.net与c#参考

    Dim g = lst.Data.GroupBy(Function(T) New With { Key T.mName, Key T.mUnit, Key T.mPrice }).Select(Fun ...

  4. div布局（持续更新）

    1. 效果: 代码: <!DOCTYPE html> <html> <head> <meta name="viewport" conten ...

  5. windows server12 FTP 创建后常见问题

    一:用administrator 关闭防火墙可以访问,但是开启后不能访问 今天在windows server 2008 R2上安装了FTP,安装过程如下,然后添加内置防火墙设置,设置后发现本地可以访问 ...

  6. js修改当前页面地址栏参数

    利用HTML5 history新特性replaceState方法可以修改当前页面地址栏参数,示例代码: //选择日期后改变地址栏 var urlSearch = location.href; var ...

  7. luogu题解P2312解方程--暴力模+秦九韶

    题目链接 https://www.luogu.org/problemnew/show/P2312 分析 这道题很毒啊,这么大的数. 但是如果多项式\(\sum_{i=0}^N a[i]*X^i=0\) ...

  8. pyquery 库的使用

    from pyquery import PyQuery as pq # 文件勿命名为 pyquery.py,会发生冲突 # 字符串初始化 html = ''' <div id="pag ...

  9. php-fpm三种运行模式

    php-fpm配置 配置文件:php-fpm.conf 开启慢日志功能的: slowlog = /usr/local/var/log/php-fpm.log.slowrequest_slowlog_t ...

  10. 帝国cms 修改分页样式

    帝国cms 修改分页样式(路径) /e/class/t_functions.php