<!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. Spring实战（六）自动装配的歧义性

    1.Spring进行自动装配时碰到的bean歧义性问题. 在进行自动装配时,只有仅有一个bean匹配所需结果时,才是可行的. 如果不仅仅一个bean能够匹配结果,例如一个接口有多个实现,这种歧义性会阻 ...

  2. 深入理解计算机系统 第十一章 网络编程 part2 第二遍

    客户端和服务器通过因特网这个全球网络来通信.从程序员的观点来看,我们可以把因特网看成是一个全球范围的主机集合,具有以下几个属性: 1.每个因特网主机都有一个唯一的 32 为名字,称为它的 IP 地址 ...

  3. webmagic学习之路-3：采集安居客经纪人详情页

    这里希望安居客的同行的轻喷!!单纯的做测试,玩玩. 就这么糟践你们的服务器了!!!sorry! 这次学会了webmagic 设置处理的访问HTML返回代码,因为之前一直404的页面process根本都 ...

  4. 题解luoguP2054 BZOJ1965【[AHOI2005]洗牌】

    题目链接: https://www.luogu.org/problemnew/show/P2054 https://www.lydsy.com/JudgeOnline/problem.php?id=1 ...

  5. （二）创建基于maven的javaFX项目

    首先使用IDEA创建一个javaFX项目 点击finish,这就创建完成了JavaFX项目,只有将其转换为maven项目即可,如图:

  6. cpu 100%怎样定位

    先用top定位最耗cpu的java进程 例如: 12430工具:top或者 htop(高级)方法:top -c 显示进程运行详细列表键入 P (大写P),按照cpu进行排序 然后用top -p 124 ...

  7. webpack提取公共js代码

    webpack打包js代码与提取公共js代码分析 webpack提取公共js代码示例 一.分析 webpack默认打包js代码时,是将从入口js模块开始,将入口js模块所依赖的js以及模块逐层依赖的模 ...

  8. 非JAVA WEB项目提供Http接口调用实现

    package com.monitor.app.utils; import com.alibaba.fastjson.JSON; import com.google.gson.Gson; import ...

  9. Delphi10.2.3利用THttpClient实现http异步下载

    随着Delphi 10.2.3的发布,随之带来更稳定.更完善的版本.今天借官方的例子,解读一下如何实现Http异步下载并显示下载进度. 使用的核心组件是THttpClient,首先建立一个THttpC ...

  10. Java面向对象(一)

    面向对象(Object Oriented) 面向过程:事物比较简单.将问题分解为若干个步骤.按照步骤依次执行.面向对象:事物比较复杂.在解决面向对象的过程中,最后的执行部分还是面向过程方式,面向过程和 ...