JavaScript学习小结之使用canvas画“哆啦A梦”时钟


Posted in Javascript onJuly 24, 2016

前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~

之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的hello world,也算是一种进步咯~

好的各位,请上车的乘客往里走,请不要堵塞通道,谢谢。我们开车吧~

正文:

今天先上图吧,看看效果再说

JavaScript学习小结之使用canvas画“哆啦A梦”时钟

今天的蓝胖子长这样,看到它还是这么胖,我就放心了。这世界还是充满正能量的,总归还有人比我胖,哈哈哈

然后是上代码

html部分

<canvas id="myCanvas" width="500" height="500">快去升级浏览器吧~</canvas>

Js部分

window.addEventListener("load", function(){
//获取画布上下文
var context = document.getElementById("myCanvas").getContext("2d");
//判断上下文是否存在,存在则可以执行接下来的代码
if(context){
//开始一个新的子路径
context.beginPath();

//我们准备画两个同心圆作为时钟的边框
//画一个外面的大圆
context.arc(100,100,99,0,2*Math.PI,false);
//以某种很好看的蓝色填充
context.fillStyle = "#315f9b";
context.fill();
//画大圆的边线
context.stroke();
//开始一条新的子路径,
//此处是必须的,要不然之后填充的颜色会把之前的全部覆盖
context.beginPath();
//将开始点移动到(194,100),用半径和圆心计算得出的点
context.moveTo(194,100);
//画内部的小圆(圆神?)
context.arc(100,100,94,0,2*Math.PI,false);
//用另一种很好看的稍浅蓝色填充内部小圆
context.fillStyle = "#4ba2cf";
context.fill();
context.stroke();
//蓝胖子出现啦~
//创建一个Image对象,将它的src设置为蓝胖子的图片
var image = new Image();
image.src = "2.png";
//用上下文的方法drawImage将图片从点(25,25)开始画,画在边长150的矩形中
context.drawImage(image,25,25,150,150);
//移动变换矩阵
//移动后(100,100)作为新的原点,即(0,0)
context.translate(100,100);
//用一个同样很好看的蓝色来画我们的时间点
context.fillStyle = "#02285a";
//fillText第一个参数为要画的字符串,第二个参数为x,第三为y
//以下x,y值是调试后的效果,大家根据不同情况,再做调整哦
context.fillText("12",-5,-80);
context.fillText("6",-4,87);
context.fillText("3",80,1);
context.fillText("9",-86,1);
//稍候详述此函数
nowTime(context);
}
},false);

以上时钟的表盘都出现了,但是时钟之所以为时钟最重要的就是它能显示时间啊(废话),所以接下来就是画指针咯

nowTime函数部分

function nowTime(context){
//创建一个日期对象,用来获取本地的时间
var myDate = new Date();
//获取小时,分钟,秒钟
var myHour = myDate.getHours();
//将小时转换为12时制
if(myHour >= 12){
myHour = myHour-12;
}
var myMin = myDate.getMinutes();
var mySec = myDate.getSeconds();
//描绘小时
//用来存放当前小时在表盘上的弧度
var hourArc;
//以3时作为圆周的起点,顺时针表示弧度
if(myHour < 3){
hourArc = 2*Math.PI-(3-myHour)*Math.PI/6;
}else{
hourArc = (myHour-3)*Math.PI/6;
}
//当指向3,6,9,12时,正好为90°的倍数
//此处因为角度转换为弧度有偏差,所以特别处理下
switch(myHour){
case 0:
hourArc = Math.PI*3/2;break;
case 3:
hourArc = 0;break;
case 6:
hourArc = Math.PI/2;break;
case 9:
hourArc = Math.PI;break;
}
//调用drawTime函数,在表盘上画出小时针
drawTime(context,hourArc,60);
//描绘分钟
//用来存放当前分钟在表盘上的弧度
var minArc; 
//以15分作为圆周的起点,顺时针表示弧度
if(myMin < 15){
minArc = 2*Math.PI-(15-myMin)*Math.PI/30;
}else{
minArc = (myMin-15)*Math.PI/30;
}
//处理分钟,依然是此处因为角度转换为弧度有偏差,所以特别处理下
switch(myMin){
case 0:
minArc = Math.PI*3/2;break;
case 15:
minArc = 0;break;
case 30:
minArc = Math.PI/2;break;
case 45:
minArc = Math.PI;break;
}
//调用drawTime函数,在表盘上画出分钟针
drawTime(context,minArc,80);
//描绘秒钟
//用来存放当前秒钟在表盘上的弧度
var secArc;
//以15秒作为圆周的起点,顺时针表示弧度
if(mySec < 15){
secArc = 2*Math.PI-(15-mySec)*Math.PI/30;
}else{
secArc = (mySec-15)*Math.PI/30;
}
//处理秒钟,依然依然此处因为角度转换为弧度有偏差,所以特别处理下
switch(mySec){
case 0:
secArc = Math.PI*3/2;break;
case 14:
secArc = 0;break;
case 29:
secArc = Math.PI/2;break;
case 44:
secArc = Math.PI;break;
}
//调用drawTime函数,在表盘上画出小时针
drawTime(context,secArc,80,"red");
//设置一个超时调用函数,每一秒超时调用nowTime更新时钟
setTimeout(function(){
//调用画新的指针前,当然应该要清除下原来的时针吧,用clearTime函数,真的好用!
clearTime(context);
//把闲杂指针清除了,再画一次当前的指针吧~
nowTime(context);
},1000);
}

那么,我们具体是怎么操作上下文画出指针的呢?我也不知道,所以,我们今天就到此结束吧~

开玩笑啦,嘿嘿,take it easy(一定要假装被我整到哈)

接下来是drawTime函数,它一共有四个参数(context,theArc,theLength,color="#000"),context一眼看穿是画布的上下文,theArc则是我们要旋转画布的角度,theLength代表指针的长度,color则是指针的颜色。

function drawTime(context,theArc,theLength,color="#000"){
//保存当前的画布环境,和restore方法配合使用能够恢复画布上下文
context.save();
//旋转画布,rotate传入的参数代表旋转的弧度
context.rotate(theArc);
//开始一条新的子路径,我们开始画指针啦
context.beginPath();
//将开始点移动到(0,0)
context.moveTo(0,0);
//画一条到(theLength,0)的路径
context.lineTo(theLength,0);
//用指定的color颜色画这条路径
context.strokeStyle = color;
//路径的宽度为2
context.lineWidth = 2;
//路径是不可见的,如果要看到路径,需要用stroke来描线,而如何描这条线,可以由我们以上用到的几个属性来定义
context.stroke();
//恢复上下文
context.restore();
}

虽然接近尾声啦,但是还有一个很重要的clearTime函数,要是没有它,你的时钟会被密密麻麻的秒针占领的,关爱密集恐惧症患者,我们人人有责

function clearTime(context){
//我们开始一条新的子路径,然后描绘一个充斥着好看蓝色的圆,把我们之前画的指针都遮盖住,相当于清除了一次表盘
context.beginPath();
context.arc(0,0,80,0,2*Math.PI,false);
context.fillStyle = "#4ba2cf";
context.fill();
//很不幸,我们的蓝胖子也被误伤了,所以再召唤它一次吧,决定就是你啦,皮卡丘(?咦)
var image = new Image();
image.src = "2.png";
//这个坐标和第一次加载的坐标不同,因为我们修改了变换矩阵,还记得吗?所以,它们的坐标应该是互补的
context.drawImage(image,-75,-75,150,150);
}

嗯啦,ok,现在是真的到此为止啦,差不多该去吃饭咯~各位可爱的程序猿们要记得吃饭哦~

JavaScript学习小结之使用canvas画“哆啦A梦”时钟

Javascript 相关文章推荐
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
省市二级联动小案例讲解
Jul 24 #Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 #Javascript
js简单实现调整网页字体大小的方法
Jul 23 #Javascript
jquery实现ajax加载超时提示的方法
Jul 23 #Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 #Javascript
js的各种排序算法实现(总结)
Jul 23 #Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 #Javascript
You might like
php 获取可变函数参数的函数
2009/08/26 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
jquery实现搜索框功能实例详解
2018/07/23 jQuery
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python高效编程技巧
2013/01/07 Python
在Python中使用元类的教程
2015/04/28 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Python使用Matlab命令过程解析
2020/06/04 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
任意存:BOXFUL
2018/05/21 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
大学生职业规划前言模板
2013/12/27 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
个人承诺书格式范文
2015/04/29 职场文书
小学生读书笔记
2015/07/01 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers