canvas实现简易时钟效果

代码

<!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实现简易时钟效果的更多相关文章

canvas实现的时钟效果
最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之 ...
canvas绘制简易时钟
时钟绘制的非常简易,但该有的都有了. 效果图如下, <!DOCTYPE html> <html> <head lang="en"> <me ...
基于canvas的原生JS时钟效果
概述运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
用canvas绘制一个简易时钟
在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...
canvas自适应圆形时钟绘制
前面的话前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制效果演示最终自适应圆形时钟的效果如下所示功能分析下面来分析一下该圆形时钟的功能 [1]静态背景对于 ...
transform实现的时钟效果
又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...
利用js+canvas实现的时钟效果图
canvas+js时钟特效运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果:  <!doctype html&g ...
GDI绘制时钟效果，与系统时间保持同步，基于Winform
2018年工作之余,想起来捡起GDI方面的技术,特意在RichCodeBox项目中做了两个示例程序,其中一个就是时钟效果,纯C#开发.这个CSharpQuartz是今天上午抽出一些时间,编写的,算是偷 ...
canvas炫酷时钟
canvas炫酷时钟实现的功能主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...

随机推荐

AQS之ReentrantReadWriteLock写锁
用法 1.1 定义一个安全的list集合 public class LockDemo { ArrayList<Integer> arrayList = new ArrayList<& ...
uni-app开发经验分享三： Vuex实现登录和用户信息留存
在做用户登录的过程中,其实最重要的是登录成功后的数据要怎么储存,储存到哪里,这里我分享一个利用vuex来实现用户登录和用户数据留存的方法 vuex代码如下: //引入vue和vuex import V ...
kvm实战
1. 安装环境 # yum install qemu-kvm libvirt virt-install virt-manager virt-viewer -y # systemctl start li ...
php artisan db:seed 报错
在laravel 5中执行,要执行数据填充时报如下错误 php artisan db:seed 错误: [ReflectionException] Cla ...
moco框架加入cookies
一.带cookie信息的get请求注意:cookie是放在request里的,一般登录的场景这些会用到 1.代码 2.接口管理工具添加注意:cooike的域和路径都要添加二.带cookie信息的 ...
Promise 中reject 和 catch 处理上有什么区别
reject 是用来抛出异常,catch 是用来处理异常reject 是 Promise 的方法,而 catch 是 Promise 实例的方法reject后的东西,一定会进入then中的第二个回调, ...
loj10173
炮兵阵地司令部的将军们打算在 N×M 的网格地图上部署他们的炮兵部队.一个 N×M的地图由 N 行 M 列组成,地图的每一格可能是山地(用 H 表示),也可能是平原(用 P表示),如下图.在每一格平 ...
python基础学习2 函数变量与赋值
学习的第一步,就是通常的输出函数:print() 1.基础主要学习了变量的赋值,变量名可以疑字母.数字.下划线(_)进行命名,但是不能以数字开头变量的赋值:变量名 = 变量值 2.模块的导入,和调用 ...
一条sql查出数据库某张表的所有属性
select t.TABLE_NAME,--表名 t.COLUMN_NAME,--字段名 t.DATA_TYPE,--字段属性 t.DATA_LENGTH,--类型长度 t.DATA_PRECISIO ...
深信服上网行为管理配置跨三层MAC识别
1.在认证高级选项里点击新增如果PC的IP和MAC存在于多个三层交换机,则需新增多个. 点击上图"查看服务器信息"测试能否从交换机获取PC的IP和MAC,有返回结果则能正常获取, ...

canvas实现简易时钟效果

代码

效果

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

随机推荐

热门专题