<!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. 位运算解决“一个数组中，只有一个数字出现n次，其他数字出现k次”问题

    转自:https://blog.csdn.net/monster_girl/article/details/52928864 在学习完位操作后,经常会遇到一类关于查找缺失整数的问题. 第一类是给你一个 ...

  2. Good Triple CodeForces - 1169D (等差子序列)

    大意: 给定01字符串, 求有多少个区间$[l,r]$, 使得存在正整数$x,k$满足$1\le x,k\le n,l\le x<x+2k\le r,s_x=s_{x+k}=s_{x+2k}$. ...

  3. Aveva Marine 新建项目001

    1# 项目代号定义,三个字符,例如Abc 2# 新建文件夹,命名为“Abc” 3# 新建文件名为evars.bat文件,放到项目文件夹的根目录 内容为: SET Abc000=项目文件夹路径\Abc0 ...

  4. 【原创】大叔经验分享（72）mysql时区

    查看当前时区 > show variables like '%time_zone%'; +------------------+--------+ | Variable_name | Value ...

  5. react的嵌套组件

    react没有vue插槽的概念,但是有嵌套组件,可以用嵌套组件实现类似插槽的功能.下例中,color,name,btn相当于具名插槽,children相当于匿名插槽. import React fro ...

  6. 深入理解hadoop之排序

    MapReduce的排序是默认按照Key排序的,也就是说输出的时候,key会按照大小或字典顺序来输出,比如一个简单的wordcount,出现的结果也会是左侧的字母按照字典顺序排列.下面我们主要聊聊面试 ...

  7. vue进阶：基于vue-cli创建项目（搭建手脚架）

    vue-cli安装.创建项目 基于vue-cli创建的项目进行开发 使用vue-cli图形化界面搭建项目 插件与工具 一.vue-cli简介.安装.创建项目 Vue-cli是基于Vue.js进行快速开 ...

  8. 8 java 笔记

    1 import语句可以简化编程,可以导入指定包下面的某个类或者全部类 2 java.lang,Object类是所有类的父类,要么是其直接父类,要么是其间接父类 3 子类扩展了父类,子类是一种特殊的父 ...

  9. 记录--js中出现的数组排序问题

    这是今天在写vue项目时发生的一个小问题,在此记录一下,方便自己的回顾.项目是前后端分离的,前台主要使用了vue-cli3.0 + mintui,是一个移动端的web app包括了后台发布管理的一些功 ...

  10. FileStrem大文件分割复制

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...