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 相关文章推荐
自动更新作用
Oct 08 Javascript
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
javascript中的this详解
Dec 08 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
农历与西历对照
2006/09/06 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
Django日志模块logging的配置详解
2017/02/14 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
商业计算机应用专业自荐书
2014/06/09 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js