咱们来聊聊用Canvas画”哆啦A梦”时钟的话题！没问题的，就算你刚入门这个领域，跟着小编一起学习，肯定能对Canvas画布有更深理解~
开心的学习之旅
开始先说说我学JavaScript时怎么开心地掌握Canvas这个小家伙。学完Canvas以后，感觉特棒，它就像个神奇绘画板，在网页设计里经常被用到。现在，用Canvas画个“哆啦A梦”钟表，这一挑战可是极其有趣和有创意！
看完小说后，作者提到原来之前还有人怂恿他画蓝胖子呢（就是咱们熟悉的那个“哆啦A梦”啦）。想到可爱的童年动漫，就想用画“哆啦A梦时钟”来表白这份爱。这样学着画自己喜欢的东西，学起来肯定感觉轻松不少~也能看出作者超级喜欢研究这些新奇玩意儿！
上车准备出发
在学怎么用Canvas画出“哆啦A梦”时钟前，先来看看这个超赞的成果。作者亲手打造的“哆啦A梦”闹钟，肥嘟嘟的蓝色小人真是太可爱了！这是他对“哆啦A梦”的独特诠释，也是Canvas绘图的魅力所在。
接下来，咱们一起慢慢探讨做这个”哆啦A梦”时钟要用到的HTML和JavaScript代码~读完这些代码再来看看它们是怎么运作的，等到学好了，你也许就会更深入地了解Canvas画布了，说不定还能做出很多有趣的玩意儿！
HTML部分：创建Canvas
在HTML代码里，只要加个id=”canvas”的标签，就能弄出个能用的绘画画布！Canvas是个能让我们随心所欲画出各种东西，包括图案、照片和文字的东西。它给了我们一个类似平面格子的东西，在这上面画什么都行。
html
在这堆HTML代码里，咱们设定Canvas元素宽高都是400px，还给它起了个名字叫‘canvas’。于是，一个400×400像素的画板就这么诞生了。接下来，就在这块画板上，画出“哆啦A梦”时钟特别的样式！
JavaScript部分：绘制表盘
下面来到javascript环节，咱们得搞个小脚本来处理下Canvas上的图案呈现问题。首当其冲的就是画出“哆啦A梦”钟表，这个比较不难，你只需要拿到Canvas上下文中的一堆API方法，然后就能随心所欲地画了。
“`javascript
canvas就等于咱们的画布，它藏在文档里，标号是`canvas`。
用咱们的canvas拿到绘制环境：ctx。
//绘制表盘
function drawClockFace(){
//绘制圆形表框
ctx.beginPath();
在这里，我要告诉你，怎么绘制一个扇形。首先选好圆心的坐标（200, 200），然后设定弧度为180°、起点方位角为0°和终点方位角为2*pi（π*2）。这样一来，我们就能轻松画出一个扇形了。
快去升级浏览器吧~
ctx.stroke();
//绘制刻度线和数字
for (let i =1; i <= 12;i++){
角度就是 30°*i，或者说大概π/6的倍数。
飙到200多度，再加上160度乘以函数的那个角度。
y等于，200加上160乘以Math.sin(角度)。
//绘制刻度线
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);
ctx.beginPath();
ctx.moveTo(x,y);
把当前点的 x 坐标设为 200 + 140 * cos(角度)，y坐标设为 200 + 140 * sin(角度)。
ctx.stroke();
//绘制数字
在（x-5，y+5）的地方填写数字”i”。
}
}
drawClockFace();
我们就来看看这段代码！它开头就抓取到名叫canvas的东西，然后用getContext(‘2d’)来获取画画要用的 ctx。紧接着就是定义了一个叫 drawClockFace 的函数，用来画时钟表盘，里面就是用 arc、moveTo、lineTo 这些方法画出圆形表框、刻度线和数字这些视觉要素。
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);
}
继续完善：添加指针
除了表盘，那个”哆啦A梦”时钟还少不了时针！转转时针，控制好它的长短和颜色，就可以让整个钟变得更有趣也更好用。
//绘制指针
绘制时间的小方法告诉你，就是这样！只要传入小时数字，分钟数字和秒钟数字就可以轻松做出好看的时间了。
//绘制时针
我们来算个时间角，就是小时乘以大概一圈的1/6再加上分钟再乘以360度。
画出时钟的指针，可以写这么句：drawHand(ctx,hourAngle,80,6)。
//绘制分针
分钟角度就是每十分钟的水平角度，只需把圆周率除以360并乘以分钟数就行了！
画个手，角度设置为minuteAngle的120，长度为4。
//绘制秒针
把第二个角度熬成和秒数一样的度数，用那个公式。
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();
}
来画个手！先用ctx画出第二角度，再把140和2输入进去喔。
//辅助函数：绘制指针
这函数是画手形的。它需要几个参数，像角度、长度和宽度啥的。怎么用？举个例子。你运行drawHand（这是一个用来画图的全名你可以不用管），然后带入刚说到的那些数字。例如：drawHand（ctx，30度，50像素，20像素）。这样就能画出你想要的手形了。
ctx.lineWidth = width;
ctx.lineCap =’round’;
ctx.moveTo(200, 200);
用200加上角的弧度值乘以长度，就可以画出这条直线了。
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);
}
高温来了，上海变成了大烤箱。在这个炎热的夏天，我们需要做好防暑降温措施，避免中暑！
结束语与思考
搞定时间显示之后，把“哆啦A梦”时钟剩下的问题解决完（比如清空指针），大功便告成！这篇文章给大家展示了用Canvas画布做出这个既可爱又实用的“哆啦A梦”时钟的过程，希望你们看完以后能对Canvas在JavaScript中的运用有更深的认识。
真心希望这份小文能助您一臂之力，无论您是想在前端开发中寻求刺激，还是想试水新事物提高自身技能，都能有所收获。
评论0