代码

<!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. B树的进化版----B+树

    C++为什么叫C plus plus?这是由于C++相当于继承C的语法后,增加了各方面的能力,所扩展出的一种新语法.在软件领域中 plus 有增加的味道.在这里B +树也一样,是B树的增强版.在学习B ...

  2. 小程序map学习:使用map获取当前位置并显示出来

    在小程序开发的过程中,我碰到过一个做map的需求,在我开发的时候我碰到了一些问题,这里总结出来,给大家一些解决方法. 简易小程序dome下载 代码片段分享: js部分: var amapFile = ...

  3. 1、进程管理常用命令和进程ID

    常用命令 1. ps (英文全拼:process status)命令用于显示当前进程的状态,类似于 windows 的任务管理器. 详细介绍参照:https://www.runoob.com/linu ...

  4. centos7制作U盘启动盘-九五小庞

    一.准备相关软件 1.8G以上U盘 2.UltraISO虚拟光驱(试用版即可)最新版 下载地址:https://cn.ultraiso.net/xiazai.html  点击下载试用 3.CentOS ...

  5. 电脑微信电脑PC 多开/防撤回 补丁

    简介 经常使用微信电脑版的用户都会发现一个蛋疼的事情,那就是微信PC版不支持多开,也就是不能同时登陆多个账号,这对于需要在电脑上登陆多个微信账号的朋友来说肯定是极其的不方便.另外有的时候别人撤回了一些 ...

  6. 如何使用 Vuepress

    项目结构 ├─docs │ ├─.vuepress --vuepress相关文件路径 (主要配置) │ │ ├─dist --build 打包生成路径 (自定义) │ │ ├─nav --导航条配置 ...

  7. Python_ 1生成器（上）初识生成器

    引言:列表生成式 现在有个需求,给定列表[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],现在要求你把列表里的每个值加1,你怎么实现?你可能会想到2种方式 1 >>> a ...

  8. 我们都可以把它放 Sidecar 容器中，这样微服务具备了 Super power，一种超能力

    云原生时代,微服务如何演进? 原创 李响 阿里技术 2020-08-28   https://mp.weixin.qq.com/s/KQG2U8_aotDL4YFB8ee6Zw 一  微服务架构与云原 ...

  9. UI自动化测试实战

    前言 前面我们已经搭建好了wordpress网站,如果需要查看运行效果可以看我前面的搭建文章,下面我们来进行自动化测试的练习. 示例 首先我们测试自动登陆 import unittest from s ...

  10. NOI Linux 快速入门指南

    目录 关于安装 NOI Linux 系统配置 网络 输入法 编辑器 1. gedit 打开 配置 外观展示 2. vim 打开 配置 使用 makefile 编译运行 1. 编写 makefile 2 ...