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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
JS中substring与substr的用法
Nov 16 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 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
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
小程序清理本地缓存的方法
2018/08/17 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
vue全屏事件开发详解
2020/06/17 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
Python中input和raw_input的一点区别
2014/10/21 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
教师节简报
2015/07/20 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS