<!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. Neo4j Cypher语法（一）

    目录 Cypher手册详解 1 背景 2 唯一性 3 语法 3.1 命名规则 3.2 表达式 3.3 变量与保留关键字 3.4 参数 3.5 操作符 3.6 模式 3.7 列表 Cypher手册详解 ...

  2. spring-cloud 学习一 介绍

    微服务Microservice,跟之相对应的是将功能从开发到交付都打包成一个很大的服务单元,一般称之为Monolith,也称「巨石」架构.微服务实现和实施思路更强调功能单一,服务单元小型化和微型化,倡 ...

  3. SharePoint Resize app

    //Global Variables used in different functions. var widthSelected=null; var senderId; var hostUrl = ...

  4. 和 Python 2.x 说再见！项目移到python3

    如果你仍在使用 2.x,那么是时候将你的代码移植到 Python 3 了. 在技术的长河中,软件.工具.系统等版本的迭代本是常事,但由于使用习惯.版本的兼容性.易用性等因素,很多用户及开发者在使用或做 ...

  5. 使用modle1（jsp+javabeans）及cookie技术实现商品展示和浏览记录

    步骤1:创建dbHelper工具类,该类主要用于获取数据库连接,采用单例模式. 步骤2:创建实体类商品类,商品表,在dao实现数据的封装处理. 步骤3:在jsp页面导入实体类,调用DAO的静态方案获取 ...

  6. mybatis 插入语句 返回自增长id方法

    背景:目前有个插入语句需要获取插入记录的id  因为id是自增长的,所以要在插入后返回这个id 错误1: mapper.xml: <!-- 新增 返回自增长id--> <insert ...

  7. java字符串大小写转换

    String test="SHA34cccddee";    System.out.println(test.toUpperCase());//小写转大写 String test= ...

  8. vue创建项目步骤

    # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project ...

  9. Java 基本的数据类型（8种）

    1.Java 基本的数据类型(8种) 整型:byte .short .int .long 浮点型:float .double 字符型:char 布尔型:boolean

  10. mysql服务启动失败

    #!/bin/bash . /etc/rc.d/init.d/functions MPORT=`netstat -atnlp | grep 3306| wc -l` MPROC=`ps ax | gr ...