代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>canvas</title>

</head>

<body>

  <canvas id="canvas"></canvas>

<script>

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

    canvas.width = 500;

    canvas.height = 500;

    // canvas.style.background = '#000';

    // canvas.style.border = "1px solid red";

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

    function clock(){

        // -----获取实时时间

        var date = new Date();

        var hour = date.getHours();

        var min = date.getMinutes();

        var sec = date.getSeconds();

        hour = hour > 12 ? (hour-12):hour;

        // console.log(hour+":"+date.getMinutes()+":"+sec);

        hour += (min/60);

        min += (sec/60); 

        ctx.clearRect(0,0,canvas.width,canvas.height);

        // -----画圆盘

        ctx.beginPath();

        ctx.arc(250,250,200,2*Math.PI,0);

        ctx.strokeStyle = "#00FFFF";

        ctx.lineWidth = 10 ;

        ctx.stroke();

        ctx.closePath();

        // 裁剪成圆形

        ctx.clip();

        // 添加背景图片

        var img = new Image();

        img.src = "image/pic1.jpg"

        ctx.drawImage(img,0,0,500,500);

        // 添加文字

        ctx.textBaseline = "top";

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

        ctx.fillStyle = "#F00";

        ctx.fillText("Made In China",180,370);

        // 添加刻度数字

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

        ctx.fillStyle = "#FF0";

        ctx.fillText("12",238,75);

        ctx.fillText("6",242,400);

        ctx.fillText("3",410,238);

        ctx.fillText("9",80,238);

        //显示时间

        ctx.font = "25px 微软雅黑";

        ctx.fillStyle = "#000";

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

        ctx.fillText(str, 200, 330);

        // -----绘制小时刻度

        ctx.save();

        ctx.translate(250,250);

        ctx.strokeStyle = "#FFFF00"

        ctx.lineWidth = 7;

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

            ctx.beginPath();

            ctx.moveTo(0,-195);

            ctx.lineTo(0,-175);

            ctx.stroke();

            ctx.closePath();

            ctx.rotate(30*Math.PI/180);

        }

        ctx.restore();

        // -----绘制分钟刻度

        ctx.save();

        ctx.translate(250,250);

        ctx.strokeStyle = "#FFFF00"

        ctx.lineWidth = 5;

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

            ctx.beginPath();

            ctx.moveTo(0,-195);

            ctx.lineTo(0,-185);

            ctx.stroke();

            ctx.closePath();

            ctx.rotate(6*Math.PI/180);

        }

        ctx.restore();

        // -----画时针

        ctx.save();

        ctx.translate(250,250);

        ctx.strokeStyle = "#00FFFF"

        ctx.lineWidth = 7;

        ctx.beginPath();

        ctx.rotate(hour*30*Math.PI/180);

        ctx.moveTo(0,10);

        ctx.lineTo(0,-130);

        ctx.stroke();

        ctx.closePath();

        ctx.restore();

        // -----画分针

        ctx.save();

        ctx.translate(250,250);

        ctx.strokeStyle = "#FFFF00"

        ctx.lineWidth = 5;

        ctx.beginPath();

        ctx.rotate(min*6*Math.PI/180);

        ctx.moveTo(0,10);

        ctx.lineTo(0,-145);

        ctx.stroke();

        ctx.closePath();

        ctx.restore();

        // -----画秒针

        ctx.save();

        ctx.translate(250,250);

        ctx.strokeStyle = "#FF0000"

        ctx.lineWidth = 3;

        ctx.beginPath();

        ctx.rotate(sec*2*Math.PI/60);

        ctx.moveTo(0,10);

        ctx.lineTo(0,-160);

        ctx.stroke();

        ctx.closePath();

        // 画小圆1

        ctx.beginPath();

        ctx.fillStyle = "#FFFF00";

        ctx.strokeStyle = "#FF0000";

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

        ctx.fill();

        ctx.stroke();

        ctx.closePath();

        // 画小圆2

        ctx.beginPath();

        ctx.fillStyle = "#FFFF00";

        ctx.strokeStyle = "#FF0000";

        ctx.arc(0,-135,5,0,2*Math.PI,0);

        ctx.fill();

        ctx.stroke();

        ctx.closePath();

        ctx.restore();

    }

    clock();

    setInterval(clock,1000);

</script>

</body>

</html>

效果

canvas实现简易时钟效果的更多相关文章

  1. canvas实现的时钟效果

    最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之 ...

  2. canvas绘制简易时钟

    时钟绘制的非常简易,但该有的都有了. 效果图如下, <!DOCTYPE html> <html> <head lang="en"> <me ...

  3. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  4. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

  5. canvas自适应圆形时钟绘制

    前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...

  6. transform实现的时钟效果

    又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...

  7. 利用js+canvas实现的时钟效果图

    canvas+js时钟特效 运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果: <!--网页文档的声明--> <!doctype html&g ...

  8. GDI绘制时钟效果，与系统时间保持同步，基于Winform

    2018年工作之余,想起来捡起GDI方面的技术,特意在RichCodeBox项目中做了两个示例程序,其中一个就是时钟效果,纯C#开发.这个CSharpQuartz是今天上午抽出一些时间,编写的,算是偷 ...

  9. canvas炫酷时钟

    canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...

随机推荐

  1. luogu P1453 城市环路

    题目描述 整个城市可以看做一个N个点,N条边的单圈图(保证图连通),唯一的环便是绕城的环路.保证环上任意两点有且只有2条路径互通.图中的其它部分皆隶属城市郊区. 现在,有一位名叫Jim的同学想在B市开 ...

  2. Nginx的简介和使用nginx实现请求转发

    一.什么是Nginx Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为H ...

  3. 转 1 认识开源性能测试工具jmeter

    1 认识开源性能测试工具jmeter   典型的性能测试工具主要有2个,Load Runner和jmeter.Load Runner是商业化的,Jmeter是开源的.下面我们认识一下开源性能测试工具j ...

  4. Centos 7.x系统下忘记用户登录密码，重置root密码的方法

    转载的,作为一个参考保存.谢谢:https://blog.csdn.net/userpass_word/article/details/81807316 1.开机后进入以下界面,然后按Esc或者E键编 ...

  5. 浅析Linux进程空间布局

    一.进程空间分布概述 对于一个进程,其空间分布如下图所示: 1.参数说明 程序段(Text):程序代码在内存中的映射,存放函数体的二进制代码. 初始化过的数据(Data):在程序运行初已经对变量进行初 ...

  6. Update Node Using a Package Manager nodesource

    How to Update Node.js to Latest Version (Linux, Ubuntu, OSX, Others) - HostingAdvice.com https://www ...

  7. 理解Latency和Throughput: 吞吐量和延迟

    Latency,中文译作延迟.Throughput,中文译作吞吐量.它们是衡量软件系统的最常见的两个指标. 延迟一般包括单向延迟(One-way Latency)和往返延迟(Round Trip La ...

  8. F - Courses （学生选课(匈牙利算法模板））

    题目大意:一共有N个学生跟P门课程,一个学生可以任意选一门或多门课,问是否达成: 1.每个学生选的都是不同的课(即不能有两个学生选同一门课) 2.每门课都有一个代表(即P门课都被成功选过) 输入为: ...

  9. hdu4460 Friend Chains（记忆化广度优先搜索）

    题意: 任意两点间最短路中的最长距离. 思路: BFS遍历每个点能到达的最远距离. Tips: vector的clear要与resize联用. #include <bits/stdc++.h&g ...

  10. Codeforces Round #594 (Div. 2) C. Ivan the Fool and the Probability Theory (思维,递推)

    题意:给你一个\(n\)x\(m\)的矩阵,需要在这些矩阵中涂色,每个格子可以涂成黑色或者白色,一个格子四周最多只能有\(2\)个和它颜色相同的,问最多有多少种涂色方案. 题解:首先我们考虑一维的情况 ...