canvas系列(二)canvas繪制電子鐘

本系列是對(duì)canvas（一）的實(shí)際運(yùn)用

首先來回顧下上節(jié)的相關(guān)知識(shí)：

    beginPath()
    closePath()
    moveTo()
    lineTo()
    fill()
    stroke()
    fillRect()
    arc（x蕉堰，y垫言，radius，startAngle,endAngle,anticlockwise）

清除繪制

    clearRect()

接下來我們來繪制一個(gè)電子時(shí)鐘：
效果圖：

電子時(shí)鐘.png

思路：
第一步：我們要?jiǎng)?chuàng)建個(gè)二維數(shù)組放置我們從0-9的點(diǎn)陣圖形伯顶，當(dāng)元素的值為1的時(shí)候，就要將其繪制出來坷澡；當(dāng)元素的值為0時(shí)讨便，則不進(jìn)行繪制。而我們要做的就是將 0 － 9 個(gè)數(shù)字用二維數(shù)組表示出來演熟。以下是二維數(shù)組的片段：

[ [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]]//1

第二步：畫個(gè)小圓
首先我們來分析鞭执，每個(gè)小圓的圓心位置：圖片來源于（慕課網(wǎng)--侵刪）

Screenshot_2016-10-22-22-28-09.png

    //首先來繪制簡(jiǎn)單的數(shù)字
    function drawNum(x,y,num,ctx){
        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+(RADIUS+1)*2*j+(RADIUS+1), y+(RADIUS+1)*2*i+(RADIUS+1), RADIUS, 0, Math.PI*2)                        
        ctx.closePath();    
        ctx.fillStyle="aqua";
         ctx.fill();
        }
    }
}
}

第三步：繪制時(shí)鐘

//  我們需要定義一個(gè)函數(shù)draw()來繪制我們的電子時(shí)鐘。
function draw(context){
    context.clearRect(0,0,1400,1200);
    var currentDate =new Date();//獲取當(dāng)前時(shí)間
    var getHours =currentDate.getHours();//獲取當(dāng)前的時(shí)
    var getMin =currentDate.getMinutes();//獲取當(dāng)前的分
var getSeconds=currentDate.getSeconds();//獲取當(dāng)前的秒        
    drawNum(Margin_X,Margin_Y,parseInt(getHours/10),context);//獲取hours的十位
        drawNum(Margin_X+(RADIUS+1)*15,Margin_Y,parseInt(getHours%10),context);//個(gè)位
        drawNum(Margin_X+(RADIUS+1)*30,Margin_Y,10,context);//中間冒號(hào)
        drawNum(Margin_X+(RADIUS+1)*45,Margin_Y,parseInt(getMin/10),context);
        drawNum(Margin_X+(RADIUS+1)*60,Margin_Y,parseInt(getMin%10),context);
        drawNum(Margin_X+(RADIUS+1)*75,Margin_Y,10,context);
        drawNum(Margin_X+(RADIUS+1)*90,Margin_Y,parseInt(getSeconds/10),context);
        drawNum(Margin_X+(RADIUS+1)*105,Margin_Y,parseInt(getSeconds%10),context);
    }

最后：設(shè)置一個(gè)定時(shí)器芒粹，讓時(shí)鐘動(dòng)起來

   setInterval(function(){
                    draw(context);
                 },1000);
                 }

完整代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style>
            body{
                background-color: black;
                margin: 10 auto;
                padding: 0 auto;
            }
            #canvas{
                margin: 200px;
                
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="1400" height="1200" style="border: 1px solid #c3c3c3;">
            您的瀏覽器不支持canvas兄纺，請(qǐng)升級(jí)瀏覽器！
        </canvas>
        <script type="text/javascript" src="js/digital.js" ></script>
        <script>
        
        var RADIUS = 4;  // 圓的半徑
        var Margin_X = 30;  //  離 canvas 原點(diǎn)的坐標(biāo)值 x
        var Margin_Y = 30;  //  離 canvas 原點(diǎn)的坐標(biāo)值 y
//              drawNum(0, 0, 1, context);
            window.onload=function(){
                var canvas =document.getElementById('canvas');
                var context=canvas.getContext("2d");
//1化漆、                drawNum(0, 0, 1, context); //首先繪制一個(gè)小圓估脆，并填充
                 setInterval(function(){
                    draw(context);
                 },1000);
                 }
//              draw(context);
   //2、可以先把時(shí)間全部 數(shù)字化表示：housr=12座云，min=34疙赠，seconds=45
                
//              我們需要定義一個(gè)函數(shù)draw()來繪制我們的電子時(shí)鐘。
                function draw(context){
                    context.clearRect(0,0,1400,1200);
                    var currentDate =new Date();//獲取當(dāng)前時(shí)間
                    var getHours =currentDate.getHours();//獲取當(dāng)前的時(shí)
                    var getMin =currentDate.getMinutes();//獲取當(dāng)前的分
                    var getSeconds=currentDate.getSeconds();//獲取當(dāng)前的秒
                    
                    drawNum(Margin_X,Margin_Y,parseInt(getHours/10),context);//獲取hours的十位
                    drawNum(Margin_X+(RADIUS+1)*15,Margin_Y,parseInt(getHours%10),context);//個(gè)位
                    drawNum(Margin_X+(RADIUS+1)*30,Margin_Y,10,context);//中間冒號(hào)
                    drawNum(Margin_X+(RADIUS+1)*45,Margin_Y,parseInt(getMin/10),context);
                    drawNum(Margin_X+(RADIUS+1)*60,Margin_Y,parseInt(getMin%10),context);
                    drawNum(Margin_X+(RADIUS+1)*75,Margin_Y,10,context);
                    drawNum(Margin_X+(RADIUS+1)*90,Margin_Y,parseInt(getSeconds/10),context);
                    drawNum(Margin_X+(RADIUS+1)*105,Margin_Y,parseInt(getSeconds%10),context);
    
                }
                
                
                
                
                //首先來繪制簡(jiǎn)單的數(shù)字
                function drawNum(x,y,num,ctx){
                    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+(RADIUS+1)*2*j+(RADIUS+1), y+(RADIUS+1)*2*i+(RADIUS+1), RADIUS, 0, Math.PI*2)                        
                            ctx.closePath();    
                            ctx.fillStyle="aqua";
                             ctx.fill();
                                
                            }
                        }
                    }
                }
        
                
                
            
        </script>
    </body>
</html>

點(diǎn)陣代碼：

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]
        ]//:
    ];

效果圖：

電子時(shí)鐘.png

最后編輯于：2017.12.04 06:10:42

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末朦拖，一起剝皮案震驚了整個(gè)濱河市圃阳，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌璧帝，老刑警劉巖捍岳，帶你破解...
沈念sama閱讀 217,509評(píng)論 6贊 504
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異睬隶，居然都是意外死亡锣夹，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,806評(píng)論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門苏潜，熙熙樓的掌柜王于貴愁眉苦臉地迎上來银萍，“玉大人，你說我怎么就攤上這事恤左√剑” “怎么了贰锁？”我有些...
開封第一講書人閱讀 163,875評(píng)論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)滤蝠。經(jīng)常有香客問我豌熄，道長(zhǎng)，這世上最難降的妖魔是什么物咳？我笑而不...
開封第一講書人閱讀 58,441評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任锣险，我火速辦了婚禮，結(jié)果婚禮上览闰，老公的妹妹穿的比我還像新娘芯肤。我一直安慰自己，他們只是感情好压鉴，可當(dāng)我...
茶點(diǎn)故事閱讀 67,488評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布崖咨。她就那樣靜靜地躺著，像睡著了一般油吭。火紅的嫁衣襯著肌膚如雪击蹲。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,365評(píng)論 1贊 302
城市分裂傳說
那天婉宰，我揣著相機(jī)與錄音歌豺，去河邊找鬼。笑死心包，一個(gè)胖子當(dāng)著我的面吹牛类咧，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播蟹腾，決...
沈念sama閱讀 40,190評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼痕惋，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了娃殖？” 一聲冷哼從身側(cè)響起值戳，我...
開封第一講書人閱讀 39,062評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎珊随，沒想到半個(gè)月后述寡，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體柿隙，經(jīng)...
沈念sama閱讀 45,500評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡叶洞，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,706評(píng)論 3贊 335
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了禀崖。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片衩辟。...
茶點(diǎn)故事閱讀 39,834評(píng)論 1贊 347
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖波附，靈堂內(nèi)的尸體忽然破棺而出艺晴，到底是詐尸還是另有隱情昼钻，我是刑警寧澤，帶...
沈念sama閱讀 35,559評(píng)論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布封寞，位于F島的核電站然评，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏狈究。R本人自食惡果不足惜碗淌，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,167評(píng)論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望抖锥。院中可真熱鬧亿眠，春花似錦、人聲如沸磅废。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,779評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)拯勉。三九已至竟趾，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間宫峦，已是汗流浹背潭兽。一陣腳步聲響...
開封第一講書人閱讀 32,912評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國(guó)打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留斗遏，地道東北人山卦。一個(gè)月前我還...
沈念sama閱讀 47,958評(píng)論 2贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像诵次，于是被迫代替她去往敵國(guó)和親账蓉。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,779評(píng)論 2贊 354

canvas系列(二)canvas繪制電子鐘

推薦閱讀更多精彩內(nèi)容