都說HTML5和CSS3將會是前端工作者要學(xué)習(xí)和掌握的必要技術(shù)。不錯,隨著各大主流瀏覽器之間的“互坑”性兼容問題原來越少。作為前端開發(fā)人員,趁早提前熟悉掌握此兩種必要知識是很有必要的!嘎嘎。
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站制作、網(wǎng)站設(shè)計、遵化網(wǎng)絡(luò)推廣、成都小程序開發(fā)、遵化網(wǎng)絡(luò)營銷、遵化企業(yè)策劃、遵化品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們最大的嘉獎;成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供遵化建站搭建服務(wù),24小時服務(wù)熱線:028-86922220,官方網(wǎng)址:www.cdcxhl.com
在此,小碼哥講給大家分享一下用HTML5中的canvas畫布制作的同步時鐘。(透露一下,此種代碼并非小碼哥親自編寫,知識俺將每一步解析了一下,,供大家參考哈,,慚愧,俺也在進(jìn)步學(xué)習(xí)中呢!?。┮虼?,說是原創(chuàng),只是因為是偶加工了一下,發(fā)到博客上了,,別BS偶哦,,,,
canvas據(jù)說在HTML5中是非常強(qiáng)大的一種實用標(biāo)簽,用熟練了,在很多地方多能夠起到很大的作用的,可以實現(xiàn)各種圖。如果大家把下面的代碼及其中所用到的與canvas有關(guān)的方法研究透了,我想,想畫什么圖還不是手到擒來嘛,,
下面直接上代碼了,不費話了,還是“路遙知‘碼’力”呢:(建議大家copy代碼到編輯器再看,到時可以預(yù)覽哦):
你的破
瀏覽器不支持canvas標(biāo)簽,無法看到我們的激情小圖片
var clock=document.getElementById('clock');
var cxt=clock.getContext('2d');//html5中canvas獲取2d畫布,為當(dāng)前在canvas中固定格式,getContext()方法返回一個用于在畫布上繪圖的環(huán)境。
var now1 = new Date(); //獲取系統(tǒng)當(dāng)前時間日期
//alert(now1);
//表的配色
//var bp = '#FFFFFF';//表盤
var bk = '#ff9900';//表框
var sk = '#0066CC';//時刻度
var fk = '#0066CC';//分刻度
var sz = '#333399';//時針
var fz = '#333399';//分針
var mz = '#CCCC00';//秒針
var mh = '#FF0033';//秒針后小圓點
var mq = '#FF0033';//秒針前小圓點
function drawClock(){
//清除畫布
cxt.clearRect(0,0,500,500);
var now =new Date();
var msec = now.getMilliseconds();//獲取毫秒
var sec=now.getSeconds();//獲取秒
var min=now.getMinutes();//獲取分
var hour=now.getHours();//獲取小時
//小時必須獲取浮點類型(小時+分?jǐn)?shù)轉(zhuǎn)化成的小時)
hour=hour+min/60; //比如當(dāng)前時刻為11:40,其中的40分鐘應(yīng)該寫成0.67小時
//問題 19:23:30
//將24小時進(jìn)制轉(zhuǎn)換為12小時
hour=hour>12?hour-12:hour;
//表盤(藍(lán)色)
//設(shè)置漸變色
var bbp = cxt.createRadialGradient(250,250,0,250,250,250); //創(chuàng)建一個放射顏色漸變,在此處應(yīng)該是以圓心為中心向四周放射漸變。
bbp.addColorStop(0.4,'#fff');//第一個參數(shù)代表“漸變度”,即漸變顏色的均勻值,一般都是從0~1的。
bbp.addColorStop(1,'#ffcc00'); //該行和上一行是一個組合,即從一個顏色漸變到另一個顏色,比如從黑色漸變到白色,他們分別對應(yīng)的顏色應(yīng)該是#000--#fff;
cxt.lineWidth=12;//鐘表外部圓框的寬度12px;
cxt.strokeStyle=bk;
cxt.fillStyle = bbp;//用設(shè)定好的漸變顏色進(jìn)行填充
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);//此句是畫外面的圓框的,,,,可以查看arc()方法!
cxt.closePath();//beginPath() 丟棄任何當(dāng)前定義的路徑并且開始一條新的路徑。它把當(dāng)前的點設(shè)置為 (0,0)。
cxt.stroke();//stroke() 方法會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認(rèn)顏色是黑色。 也可以認(rèn)為是對上面方法操作的執(zhí)行的方法
cxt.fill();//fill() 方法填充當(dāng)前的圖像(路徑)。默認(rèn)顏色是黑色。
//刻度
//時刻度
for(var i=0;i<12;i++){
cxt.save();
//設(shè)置時針的粗細(xì)
cxt.lineWidth=7;
//設(shè)置時針的顏色
cxt.strokeStyle=sk;
//先設(shè)置0,0點
cxt.translate(250,250);
//再設(shè)置旋轉(zhuǎn)角度
cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);//這兩個moveTo()和lineTo()方法分別是控制劃線的長寬的
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//分刻度
for(var i=0;i<60;i++){
cxt.save();
//設(shè)置分刻度的粗細(xì)
cxt.lineWidth=5;
//設(shè)置顏色(使用時刻度的顏色)
cxt.strokeStyle=fk;
//設(shè)置或者重置畫布的0,0點
cxt.translate(250,250);
//設(shè)置旋轉(zhuǎn)角度
cxt.rotate(i*6*Math.PI/180);
//畫分針刻度
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//時針
cxt.save();
//設(shè)置時針風(fēng)格
cxt.lineWidth=7;
//設(shè)置時針的顏色
cxt.strokeStyle=sz;
//設(shè)置異次元空間的0,0點
cxt.translate(250,250);
//設(shè)置旋轉(zhuǎn)角度
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-110);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分針
cxt.save();
//設(shè)置分針的風(fēng)格
cxt.lineWidth=5;
cxt.strokeStyle=fz;
//設(shè)置異次元空間分針畫布的圓心
cxt.translate(250,250);
//設(shè)置旋轉(zhuǎn)角度
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒針
cxt.save();
//設(shè)置秒針的風(fēng)格
//顏色紅色
cxt.strokeStyle=mz;
//粗細(xì) 3像素
cxt.lineWidth=3;
//重置0,0點
cxt.translate(250,250);
//設(shè)置旋轉(zhuǎn)角度
//cxt.rotate(sec + msec*0.006*Math.PI/180);
cxt.rotate((sec+msec/1000)*6*Math.PI/180);
//畫圖
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//畫出時針、分針、秒針的交叉點、
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
cxt.closePath();
//設(shè)置填充樣式
cxt.fillStyle=mh;
cxt.fill();
//設(shè)置筆觸樣式(秒針已設(shè)置)
cxt.stroke();
//設(shè)置秒針前段的小圓點
cxt.beginPath();
cxt.arc(0,-150,5,0,360,false);
cxt.closePath();
//設(shè)置填充樣式
cxt.fillStyle=mq;
cxt.fill();
//設(shè)置筆觸樣式(秒針已設(shè)置)
cxt.stroke();
cxt.restore();
}
//使用setInterval(代碼,毫秒時間) 讓時鐘動起來
drawClock();
setInterval(drawClock,50);
配圖:
希望對大家有幫助哦,,,,轉(zhuǎn)載請注明出處哦,謝謝啦!