运用canvas画“哆啦A梦”时钟的代码-
发布时间：09/01 来源：未知 浏览：
关键词：
前言：今天看完了Js书的canvas画布那张，好开心~又是心爱的canvas~欧耶~
以前看到有人倡议我画蓝肥子，对哦，我怎么把童年最喜好的蓝肥子忘了，为了表达我对蓝肥子的歉意，所以今天画了会动的hello world，也算是一种进步咯~
好的各位，请上车的乘客往里走，请不要拥塞通道，感谢。我们开车吧~
正文：
今天先上图吧，看看结果再说
今天的蓝肥子长这样，看到它还是这么肥，我就安心了。这天下还是洋溢正能量的，总奉还有人比我肥，哈哈哈
然后是上代码
html局部
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，此刻是真的到此为止啦，差未几该去用饭咯~各位招人喜欢的程序猿们要记得用饭哦~
以上就是运用canvas画“哆啦A梦”时钟的代码的细致内容，更多请关注 百分百源码网 其它相干文章！
