canvas繪畫時鐘及倒計時時鐘
阿新 • • 發佈：2017-06-04
整數 效果圖 有時 二維 -c 更新時間 enter 程序 etc
因為偶是一個前端小白，所以呢！！！！想要把自己在網上看的代碼，並且自己敲了一遍，做了註釋分享給大家~~~不喜勿噴，謝謝喲！我是super喵二（程序媛），大家一起成長！！！
倒計時時鐘（先放效果圖）（好吧我這裏不是倒計時，是普通時鐘，不過一會放上代碼裏不僅有倒計時也有時間，自行發現）：
大概思路：1、0-9的數字以及冒號繪制，定義一個二維數組，每一個數字對應一個數組，1代表畫圓，0不畫。
digit =
[
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
],//0
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
],//1
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
],//2
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//3
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,1]
],//4
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//5
[
[0,0,0,0,1,1,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//6
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
],//7
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//8
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
],//9
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
]//:
];
2、拋出的小球的顏色也是存在一個二維數組，隨機拋出。（當然這裏顏色也可以不用這樣寫，）
3、繪制時間：計算當前時間的秒數，轉換成小時/分鐘/秒數
4、時間更新：下一秒與當前不一樣就更新，同樣都寫在更新函數裏，在主函數裏設置
setInterval(
function(){
rander(context);//繪制時間：渲染，具體繪制
update();//更新時間
},
50);}
5、拋出的小球的繪制：定義一個小球屬性數組，包含小球拋出時的坐標，重力，以及x與y方向的速度，根據時間小球為1時拋出動態小球。
6、小球性能優化：碰到邊緣，增加摩擦系數，速度下降，一直到最後速度為零或者滾出畫布邊緣，就刪除小球。
7、根據屏幕大小變化。
var radius=6;
/*var endTime=new Date();
endTime.setTime(endTime.getTime()+3600*1000);//表示每次刷新都是哪個時間開始倒計時,這裏是每次刷新從一個小時開始倒計時。*/
var curshowSeconds=0;//當前時間秒數為0
var balls = [];//拋出的小球的數組
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];//每個小球的顏色
window.onload=function(){
Window_width=document.body.clientWidth;
Window_height=document.body.clientHeight;
marginLeft=Math.round(Window_width/10);//左右占1/5，所以左側占1/10
radius=Math.round(Window_width*4/5/108)-1;//占4/5
margintop=Math.round(Window_height/5);
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.width=Window_width;
canvas.height=Window_height;
curshowSeconds=getCurShowSeconds();
setInterval(
function(){
rander(context);//繪制時間：渲染，具體繪制
update();//更新時間
},
50);
}
//顯示當前時間的總共的秒數
function getCurShowSeconds()
{
var curTime=new Date();
/*var ret=endTime.getTime()-curTime.getTime();//倒計時=結束時間-當前時間*/
var ret=curTime.getHours()*3600+curTime.getMinutes()*60+curTime.getSeconds();//時鐘效果
/*var ret=curTime.getTime();//返回距離1970年之間的毫秒數*/
/*ret=Math.round(ret/1000);//轉換成秒數，round() 方法可把一個數字舍入為最接近的整數*/
/*return ret>=0?ret:0;//判斷reTime是否>=0 如果是 則返回 ret 否則返回0*/
return ret;
}
function update(){//下一秒和當前不一樣，就更新
var nextShowSeconds=getCurShowSeconds();//得到下一個時間
var nextHours=parseInt(nextShowSeconds/3600);
var nextMinutes=parseInt((nextShowSeconds-nextHours*3600)/60);
var nextSeconds=nextShowSeconds%60;
var curHours=parseInt(curshowSeconds/3600);
var curMinutes=parseInt((curshowSeconds-curHours*3600)/60);
var curSeconds=curshowSeconds%60;
if (nextSeconds!=curSeconds) {//判斷下一個時間是否等於當前的時間//當不等於的時候
if(parseInt(curHours/10) != parseInt(nextHours/10)) {
addBalls( marginLeft + 0 , margintop , parseInt(curHours/10) );
}
if(parseInt(curHours%10) != parseInt(nextHours%10) ) {
addBalls( marginLeft + 15*(radius+1) , margintop , parseInt(curHours%10) );
}
if(parseInt(curMinutes/10) != parseInt(nextMinutes/10) ) {
addBalls( marginLeft +39*(radius+1) , margintop , parseInt(curMinutes/10) );
}
if(parseInt(curMinutes%10) != parseInt(nextMinutes%10) ) {
addBalls( marginLeft + 54*(radius+1) , margintop , parseInt(curMinutes%10) );
}
if(parseInt(curSeconds/10) != parseInt(nextSeconds/10) ) {
addBalls( marginLeft + 78*(radius+1) , margintop , parseInt(curSeconds/10) );
}
if(parseInt(curSeconds%10) != parseInt(nextSeconds%10) ) {
addBalls( marginLeft + 93*(radius+1) , margintop , parseInt(curSeconds%10) );
}
curshowSeconds=nextShowSeconds;//當前時間==下一個時間
}
updatBalls();//拋出的小球的更新
}
//運動的小球
function addBalls(x,y,num){
for (var i=0;i<digit[num].length;i++) {
for (var j=0;j<digit[num][i].length;j++) {
if (digit[num][i][j]==1) {
var ball={//定義一個小球變化的數組
x:x+j*2*(radius+1)+(radius+1),
y:y+i*2*(radius+1)+(radius+1),
g:1.5+Math.random(),//加速度 1.5-2.5 // 不同
//pow() 方法可返回 x 的 y 次冪的值。在這裏是 -1的N次冪 // Math.ceil向上取整
// 在X軸上的加速度 //Math.round() 四舍五入取整 //random() 0 ~ 1 之間 隨機數。
//1-1000//取整 //取-1 或+1 //*4//-4至+4
vx:Math.pow( -1 , Math.ceil( Math.random()*1000 ) ) * 4,
vy:Math.round(Math.random()*(-3)+(-6)),//向上拋一點點，速度在(-3 —— -6)
//math.floor(x)對浮點數向下取整
color: colors[ Math.floor( Math.random()*colors.length )]//顏色數組
}
balls.push(ball); //把小球添加進小球數組裏
}
}
}
}
function updatBalls(){
//1.（1）小球運動值的變化
for (var i=0;i<balls.length;i++) {
balls[i].x+=balls[i].vx;
balls[i].y+=balls[i].vy;
balls[i].vy+=balls[i].g*0.9;
//（2）.碰撞檢測
if( balls[i].y >=Window_height-radius ){
balls[i].y = Window_height-radius;
balls[i].vy =-balls[i].vy*0.6;////0.6摩擦系數 越大越遠
}
}
//2.性能優化 刪除小球
var cnt=0;//小球數量
for (var i=0;i<balls.length;i++) {
//右邊緣>0 和 左邊緣<canvas.width 說明在畫布內 然後放在數組裏
if (balls[i].x+radius>0&&balls[i].x-radius<Window_width) {
balls[cnt++]=balls[i];
}
}
while(balls.length>Math.min(300,cnt)){//保留200到cnt之間的最小值
balls.pop();//pop()用於刪除並返回數組的最後一個元素
}
console.log(balls.length);
}
//繪制時間
function rander(ctx){
ctx.clearRect(0,0,Window_width,Window_height);
var hours=parseInt(curshowSeconds/3600);
var minute=parseInt((curshowSeconds-hours*3600)/60);
var seconds=curshowSeconds%60;
randerDigit(marginLeft,margintop,parseInt(hours/10),ctx);//從哪一個位置開始，和哪一個數字
randerDigit(marginLeft+15*(radius+1),margintop,hours%10,ctx);
randerDigit(marginLeft+30*(radius+1),margintop,10,ctx);
randerDigit(marginLeft+39*(radius+1),margintop,parseInt(minute/10),ctx);//從哪一個位置開始，和哪一個數字
randerDigit(marginLeft+54*(radius+1),margintop,minute%10,ctx);
randerDigit(marginLeft+69*(radius+1),margintop,10,ctx);
randerDigit(marginLeft+78*(radius+1),margintop,parseInt(seconds/10),ctx);//從哪一個位置開始，和哪一個數字
randerDigit(marginLeft+93*(radius+1),margintop,seconds%10,ctx);
for (var i=0;i<balls.length;i++) {
ctx.fillStyle=balls[i].color;
ctx.beginPath();
ctx.arc(balls[i].x,balls[i].y,radius,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
}
//繪制時間的小球
function randerDigit(x,y,num,ctx){
ctx.fillStyle="rgb(0,102,153)";
for (var i=0;i<digit[num].length;i++) {
for (var j=0;j<digit[num][i].length;j++) {
if (digit[num][i][j]==1) {
ctx.beginPath();
ctx.arc(x+j*2*(radius+1)+(radius+1),y+i*2*(radius+1)+(radius+1),radius,0,Math.PI*2);
ctx.closePath();
ctx.fill();
}
}
}
}
這裏還有一個canvas時鐘的繪制：主要是理解Math.cos()與Math.sin()函數，寫出來就不難了。
var dom=document.getElementById(‘clock‘);//首先獲取canvas的id
var ctx=dom.getContext(‘2d‘);//獲取上下文
var width=ctx.canvas.width;//定義的圓的的寬
var height=ctx.canvas.height;//定義的圓的高
var r=width/2;
var rem=width/200;//設置比例,這樣畫布放大或縮小時也時鐘也會跟著變
function DrawBackground(){
ctx.save();//畫圓之前的狀態保存
ctx.translate(r,r);//映射到畫布中間
ctx.beginPath();//開始路徑
ctx.lineWidth=10*rem;//圓的外框線
ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false);
ctx.stroke();
var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font=18*rem+‘px Arial‘;
ctx.textAlign=‘center‘;// 居中對齊顯示
ctx.textBaseline=‘middle‘;
/*hourNumbers.forEach(function(number, i){
var rad=2*Math.PI / 12*i;//求弧度
var x=Math.cos(rad)*(r-30);
var y=Math.sin(rad)*(r-30);
ctx.fillText(number,x,y);
});
var */
for(var i=0;i<hourNumbers.length;i++){
var rad=2*Math.PI/12*i;
var y=Math.sin(rad)*(r-30*rem);
var x=Math.cos(rad)*(r-30*rem);
ctx.fillText(hourNumbers[i],x,y);
}
//秒鐘點
for(var i=0;i<60;i++){
var rad=2*Math.PI/60*i;
var x=Math.cos(rad)*(r-15*rem);
var y=Math.sin(rad)*(r-15*rem);
ctx.beginPath();//畫圓之前重置
if(i%5==0){
ctx.fillStyle="black";
ctx.arc(x,y,3*rem,0,2*Math.PI,false);
}
else{
ctx.fillStyle="#666";
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}
ctx.fill();
}
}
function Drawhour(hour,minute){
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/12*hour;//每個小時的弧度
var mrad=2*Math.PI/12/60*minute;
ctx.rotate(rad+mrad);//旋轉
ctx.lineWidth=3*rem;//時針寬度
ctx.lineCap=‘round‘;
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();
}
function DrawMinute(minute){
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/60*minute;
ctx.rotate(rad);//旋轉
ctx.lineWidth=3*rem;
ctx.lineCap=‘round‘;
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r+30*rem);
ctx.stroke();
ctx.restore();
}
//秒針的頭寬一些，尾巴細一些，所以不是畫一條線，而是需要填充
function DrawSecond(second){
ctx.save();
ctx.beginPath();
ctx.fillStyle="darkred";
var rad=2*Math.PI/60*second;
ctx.rotate(rad);//旋轉
ctx.moveTo(-2,20*rem);
ctx.lineTo(2,20*rem);
ctx.lineTo(1,-r+18*rem);
ctx.lineTo(-1,-r+18*rem);
ctx.fill();
ctx.restore();
}
function DrawDot(){
ctx.beginPath();
ctx.fillStyle="aqua";
ctx.arc(0,0,3*rem,0,2*Math.PI,false);
ctx.fill();
}
//如何清除，重現,
function Draw()
{
ctx.clearRect(0,0,width,height);//清除canvas，再重畫
var now=new Date();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
DrawBackground();//清除矩形時需要從矩形左上角開始。執行這個函數時先保存之前的左上角，執行後，原點在畫布中心
DrawDot();
Drawhour(hour,minute);
DrawMinute(minute);
DrawSecond(second);
ctx.restore();//原點恢復到左上角
}
Draw();//每一秒執行之前執行一次
setInterval(Draw,1000);//相當於每秒畫一次時針，分針，和秒針
canvas繪畫時鐘及倒計時時鐘