代码

<!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. JavaSE 基础知识（常识概念 + 基础语法）问答总结/面试题 —— 讲给应届生的 Java 开源知识项目

    写在最前面 这个项目是从20年末就立好的 flag,经过几年的学习,回过头再去看很多知识点又有新的理解.所以趁着找实习的准备,结合以前的学习储备,创建一个主要针对应届生和初学者的 Java 开源知识项 ...

  2. Python爬虫：数据分析小能手：JSON库的用法

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写. 给大家推荐一个Python交流的q裙,大家在学习遇到了什么问题都可以进群一起交流,大家 ...

  3. MySQL集群之MyCat

    MySQL集群之MyCat 一.MyCat简介及分析 1.1 MyCat是什么? 1.2 关键特性及应用场景 1.2.1 关键特性 1.2.2 应用场景 1.2.3 MyCat不适合的应用场景 1.3 ...

  4. Java——定时任务调度工具

    一.什么是定时任务调度? 1.常用的定时调度工具:Timer和Quartz 二.Timer简介 1.Timer的定义以及架构 2.Timer示例 三.Timer的定时调度函数 1.schedule的四 ...

  5. boss导出简历css

    $('body').css('background-color', '#fff')$('.keywords').hide()$('#wrap').html($('.resume-box').css(' ...

  6. 写了这么多年 JavaScript ，竟然还不知道这些技巧？

    不少人有五年的 JavaScript 经验,但实际上可能只是一年的经验重复用了五次而已.完成同样的逻辑和功能,有人可以写出意大利面条一样的代码,也有人两三行简洁清晰的代码就搞定了.简洁的代码不但方便阅 ...

  7. OsgEarth开发笔记（一）：Osg3.6.3+OsgEarth3.1+vs2019x64开发环境搭建(上)

    前言   OSG研究之后,做地理GIS显示了地球:<项目实战:Qt+OSG教育学科工具之地理三维星球>,这一文章是基于OSG做的,而基于OsgEarth是可以进一步对地球进行深度操作,所以 ...

  8. Angular写一个Form组件-TagInput

    前端开发少不了和表单打交道; Angular中, 提供了强大的表单的支持, 响应式表单(Reactive Form) 和 模板驱动的表单(Template-driven Form) 的双向数据流给我们 ...

  9. Codeforces1248F. Catowice City

    题意:1e6个人每人有一只猫 每个人认识自己的猫 现给出一些关系表示一个人认识某只猫 要选出一些人和一些猫 使得每个人都不认识选出来的猫 且人+猫=n 题解:答案肯定是 一个人的集合和一个猫的集合 那 ...

  10. UVA1401 Remember the Word 字典树维护dp

    题目链接:https://vjudge.net/problem/UVA-1401 题目: Neal is very curious about combinatorial problems, and ...