canvas画时钟,重拾乐趣!

时间:2021-08-15 10:18:08

canvas画时钟,重拾乐趣!

canvas时钟--效果图

一、先来简单介绍画时钟需要的canvas知识

1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用。

HTML代码:

<canvas id="canvas" class="canvas" width="400" height="400" border:></canvas>

2.使用id寻找canvas元素,在js代码中使用document.getElementById()等方法获取id。

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

3.通过canvas元素的getContext方法来获取其上下文(Context),即创建Context对象,以获取允许绘画的2D环境。

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

4.先来认识一下canvas的绘制方法。

(1)绘制矩形的两种方法:fillRect 和 strokeRect

  前者用于绘制用颜色填充(fill)区域的矩形,后者用于绘制轮廊(stroke)或线条。图形指定颜色用到了两个属性,即fillStyle 和 strokeStyle,前者用于指定要绘制的填充区域的颜色,后者用于指定要绘制的线条颜色。

//绘制填充颜色矩形,默认黑色
ctx.fillStyle="red";
ctx.fillRect(0,0,200,100);

//绘制有颜色线条
ctx.strokeStyle="blue";
ctx.strokeRect(0,0,100,50);

(2)绘制圆形

  绘制圆形是会用到四种方法:beginPath、arc、closePath和fill或stroke。

//画圆填充红颜色//绘制园用法:ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise);
ctx.beginPath();
ctx.fillStyle="red";
ctx.arc(0,0,100,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();

//线条蓝色画圆
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.lineWidth=10;//设置线条宽度
ctx.arc(0,0,174,0,Math.PI*2,true);
ctx.stroke();

(3)绘制直线

  用到两个主要方法:moveTo 和 lineTo 以及stroke。

ctx.moveTo(x,y)——规定线起始点(x,y)。ctx.lineTo(x,y)——规定直线路线的终点。

ctx.moveTo(,);
ctx.lineTo(,);
ctx.stroke();//该方法用于沿该路径绘制线条

二、画canvas时钟过程

首先,定义画布字体的为圆角,让我们看起来美美的:ctx.lineCap="round";

其次,非常重要,时钟是随着时分秒针的转动而转动的,so——我们需要画布范围内必须设计画布不断清除和刷新:ctx.clearRect(0,0,400,400);

再次,一个画布初始中心点(0,0)是在画布左上角,so——画时钟需要把中心点转移:ctx.translate(200,200);

最后,也是最重要的,每多一个save()保存就必须在下面补上一个还原restore();

1、画分刻线

  画线嘛,上面咱们已经讲过画线的步骤,就不多说啦!只需要注意用到rotate()方法将,先用ctx.moveTo(),ctx.lineTo在画布右侧画出第一根分刻线,再定义需要旋转的角度变量——rotateD,经过ctx.rotate(rotateD)方法来for循环以及画布不断清除刷新的状态,即可画出分刻线。

  当然这里还需要注意一点:画布需要用到另个方法来包含要执行的内容,分别是save()、restore()。save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许你临时地改变图像状态,然后,通过调用 restore() 来恢复以前的值。我打个比喻:我有一只手,戴上手套去完成一些事情,手套摘下来之后,我的手还是我的手。额,有点。。。呵呵

//画刻度线
        for (var i = 0; i ; i++) {
            ctx.save();
            ctx.beginPath();
            var rotateD = i*Math.PI*2/60;
            ctx.rotate(rotateD);
            ctx.lineWidth = 4;
            ctx.moveTo(170,0);
            ctx.lineTo(160,0);
            ctx.stroke();
            ctx.restore();
        };

2、画时刻线

  同理,画时刻线只需要修改线宽以及旋转角度

3、画时针

  在前面new一个data变量var date = new Date;,并且定义一个时针随时间变化旋转角度也变化的变量rotateH。

  小时针旋转角度rotateH;

  公式:rotateH = 时针旋转角度 +分针旋转角度/12 - 直角 = data.getHours()/12*2*Math.PI + date.getMinutes()/60/12*Math.PI*2 - Math.PI/2;

  (为什么会减Math.PI/2呢,因为时针的初始值为(-12,0)、(125,0);针指向正好是在三点中位置,所以需要减掉一个直角才能从十二点开始旋转)。

4、画分针

  定义一个分针随时间变化旋转角度也变化的变量rotateM。

  公式:rotateM = 分针旋转角度 + 秒针旋转角度/60 -直角 = date.getMinutes()/60*Math.PI*2 + date.getSeconds()/60/60*Math.PI*2 - Math.PI/2;

5、画秒针

定义一个分针随时间变化旋转角度也变化的变量rotateS。

  公式:rotateM = 秒针旋转角度 - 减直角 = date.getSeconds()/60*Math.PI*2 - Math.PI/2;

6、时针数字略

三、canvas实现时钟完整代码

 js完整代码:

jQuery(function($){
	function clock(){
		var canvas= document.getElementById("canvas");
    	var ctx = canvas.getContext("2d");
    	var date = new Date;
    	ctx.lineCap = "round";//字体变圆角
    	ctx.clearRect(0,0,400,400);//不断清除画布 不断再执行刷新

    	ctx.save();//每多一个保存就必须在下面补上一个还原restore()
    	ctx.translate(200, 200);//中心点转移

    	//画刻度线
    	for (var i = 0; i < 60; i++) {
    		ctx.save();
	    	ctx.beginPath();
	    	var rotateD = i*Math.PI*2/60;
	    	ctx.rotate(rotateD);
	    	ctx.lineWidth = 4;
	    	ctx.moveTo(170,0);
	    	ctx.lineTo(160,0);
	    	ctx.stroke();
	    	ctx.restore();
    	};
    	for (var i = 0; i < 12; i++) {
    		ctx.save();
	    	ctx.beginPath();
	    	var rotateB = i*Math.PI*2/12;
	    	ctx.lineWidth = 6;
	    	ctx.rotate(rotateB);
	    	ctx.moveTo(170,0);
	    	ctx.lineTo(150,0);
	    	ctx.stroke();
	    	ctx.restore();
    	};
    	//画时针
    	var rotateH = date.getHours()/12*Math.PI*2 + date.getMinutes()/60/12*Math.PI*2 - Math.PI/2;
    	ctx.save();
    	ctx.beginPath();
    	ctx.rotate(rotateH);
    	ctx.lineWidth=12;
    	ctx.moveTo(-12,0);
    	ctx.lineTo(125,0);
    	ctx.stroke();
    	ctx.restore();

    	//画分针
    	var rotateM = date.getMinutes()/60*Math.PI*2 + date.getSeconds()/60/60*Math.PI*2 - Math.PI/2;
    	ctx.save();
    	ctx.strokeStyle="red";
    	ctx.beginPath();
    	ctx.rotate(rotateM);
    	ctx.lineWidth=9;
    	ctx.moveTo(-12,0);
    	ctx.lineTo(135,0);
    	ctx.stroke();
    	ctx.restore();

    	//画秒针
    	var rotateS = date.getSeconds()/60*Math.PI*2 - Math.PI/2;
    	ctx.save();
    	ctx.strokeStyle="red";
    	ctx.beginPath();
    	ctx.rotate(rotateS);
    	ctx.lineWidth=6;
    	ctx.moveTo(-16,0);
    	ctx.lineTo(140,0);
    	ctx.stroke();

    	//画中心圆点
    	ctx.fillStyle="red";
    	ctx.arc(0,0,10,0,2*Math.PI)
    	ctx.closePath();
    	ctx.fill();

    	//画秒针圆圈头
    	ctx.strokeStyle="red";
    	ctx.moveTo(160,0);
    	ctx.arc(150,0,8,0,2*Math.PI);
    	ctx.stroke();
    	ctx.restore();

        // 画clock的表盘
        ctx.beginPath();
        ctx.strokeStyle="blue";
        ctx.lineWidth=10;
        ctx.arc(0,0,174,0,Math.PI*2);
        ctx.stroke();

    	ctx.restore();
    	window.requestAnimationFrame(clock);
	};
    window.requestAnimationFrame(clock);
});

  总结,写得粗糙,仅供参考,期待共同探讨!

canvas画时钟,重拾乐趣!的更多相关文章

  1. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. canvas 画时钟 会动呦

    //半径 var r = 130; //重置原点 ctx.save(); ctx.translate(400, 500); //使用translate重置原点 function drawClock() ...

  3. html5学习&lpar;一&rpar;--canvas画时钟

    利用空余时间学习一下html5. <!doctype html> <html> <head></head> <body> <canva ...

  4. 用canvas画时钟

    效果图在博客首页上. html: <canvas id="canvas" >Your browser does not support canvas</canva ...

  5. 深夜,用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  6. 简单酷炫的Canvas数字时钟

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 我记得很早之前就看过这个DEMO,是岑安大大博客里看到的: 就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看 ...

  7. &lbrack;JS&comma;Canvas&rsqb;日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  8. CSS魔法堂:重拾Border之——更广阔的遐想

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  9. CSS魔法堂:重拾Border之——图片作边框

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

随机推荐

  1. java 面向对象编程--第十四章 多线程编程

    1.  多任务处理有两种类型:基于进程和基于线程. 2.  进程是指一种“自包容”的运行程序,由操作系统直接管理,直接运行,有自己的地址空间,每个进程一开启都会消耗内存. 3.  线程是进程内部单一的 ...

  2. zookeeper作为soa服务器集群的协调调度服务器

    zookeeper作为soa服务器集群的协调调度服务器,当然自身也支持集群. ZooKeeper搭建系列集 ZooKeeper系列之一:ZooKeeper简介 ZooKeeper系列之二:ZooKee ...

  3. 爬虫技术浅析 &vert; WooYun知识库

    爬虫技术浅析 | WooYun知识库 爬虫技术浅析 好房通ERP | 房产中介软件最高水准领导者 undefined

  4. SilkTest高级进阶系列10 – bitmap工具bitview

    SilkTest 提供了一个bitmap的工具,它可以帮助我们捕捉,比较bitmap文件.该bitmap工具的位置是~/SilkTest/bitview.exe 运行该工具后,你会发现它提供了捕捉控件 ...

  5. CentOS更新源

    1.首先备份/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS ...

  6. &lbrack;AH2017&sol;HNOI2017&rsqb;礼物&lpar;FFT&rpar;

    题目描述 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一 个送给她.每个手环上各有 n 个装饰物,并且每个装饰物都有一定的亮度.但是在她生日的前一 ...

  7. 搭建企业级NFS网络文件共享服务

    NFS服务简介 NFS是Network  File System(网络文件系统).主要功能是通过网络让不同的服务器之间可以共享文件或者目录.NFS客户端一般是应用服务器(比如web,负载均衡等),可以 ...

  8. iOS开发值得收藏的博客

    http://kobedai.me/ objc.io PS:经典,内容深而广objc中国NSHipster PS:很多小细节NSHipster 中文版唐巧的技术博客 PS:LZ是唐巧的脑残粉…OneV ...

  9. 【spark系列3】spark开发简单指南

    分布式数据集创建之textFile         文本文件的RDDs能够通过SparkContext的textFile方法创建,该方法接受文件的URI地址(或者机器上的文件本地路径,或者一个hdfs ...

  10. sipp模拟电信运营商VoIP终端测试&lpar;SIP协议调试&rpar;

    三大运营商都有SIP服务器,用来支持语音对讲,多媒体调度等功能,他们的平台可能不是标准的SIP协议会话. 为了应对没完没了的对接各个厂商的平台,这里再整理了一套协议脚本,毕竟全都是没有意义的无用功,标 ...