canvas粒子時鐘

来源:http://www.cnblogs.com/xiaohuochai/archive/2017/02/06/6368039.html
-Advertisement-
Play Games

[1]效果演示 [2]點陣數字 [3]時鐘實現 [4]隨機拋物線 [5]粒子動畫 [6]公告欄擴展 ...


前面的話

　　本文將使用canvas實現粒子時鐘效果

 

效果展示

點陣數字

　　digit.js是一個三維數組，包含的是0到9以及冒號(digit[10])的二維點陣。每個數字的點陣表示是7*10大小的二維數組

　　通過遍曆數字點陣的二維數組，當該位置的值為1時，則繪製一個粒子，否則不繪製

　　將繪製數字的函數命名為renderDigit()。在該函數中，將粒子繪製為一個小圓。小圓的半徑為R，小圓所占據的矩形寬(高)為2(R+1)。由於數字點陣是10*7的二維數組，所以一個數字的寬度為14(R+1)，高度為20(R+1)

　　假設數字的高度為100px，則小圓的半徑R=4

<div id="test">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>10</button>
</div>
<canvas id="canvas">當前瀏覽器不支持canvas，請更換瀏覽器後再試</canvas>
<script src="http://files.cnblogs.com/files/xiaohuochai/digit.js"></script>    
<script>var canvas = document.getElementById('canvas');
    if(canvas.getContext){
        var cxt = canvas.getContext('2d');
    }
    function renderDigit(num){
        //重置畫布寬度，達到清空畫布的效果
        canvas.height = 100;
        var R = canvas.height/20-1;
        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){
                    cxt.beginPath();
                    cxt.arc(j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                    cxt.closePath();
                    cxt.fill();
                }
            }
        }        
    }
    var test = document.getElementById('test');
    test.onclick = function(e){
        e = e || event;
        var target = e.target || e.srcElement;
        if(!isNaN(target.innerHTML)){
            renderDigit(target.innerHTML);
        }
        
    }
</script>

時鐘實現

　　在上一步的點陣數字的基礎上，實現一個粒子時鐘。將時鐘實現的函數命名為digitTime()，時鐘實現由獲取時間數據和渲染時鐘兩部分組成

【時間數據】

　　最簡單的時鐘形式由兩位的小時、兩位的分鐘和兩位的秒鐘組成，中間用冒號隔開。通過日期對象Date來獲取當前時間，以及當前的小時、分鐘和秒鐘。但是，最終需要得到的是數字表示的時鐘

　　比如12:02:36的時間數據的表示形式為data[1,2,10,0,2,10,3,6]

【渲染時鐘】

　　獲取到時間數據後，通過迴圈使用renderDigit()來渲染時鐘中的每一個數字。此時，有一個需要改變的地方是arc()函數中的x坐標，否則它們將疊加在一起

　　為了將時鐘數字表示更加清晰在每個數字之間增加一定的間距。每個數字的寬度是14(R+1)，假設data數組中7個數字的索引為index，則每個數字的起始X坐標可以等於14(R+2)*index

　　最後通過定時器每間隔一段時間後更新時間

<canvas id="canvas" style="width:400px;">當前瀏覽器不支持canvas，請更換瀏覽器後再試</canvas>
<script src="http://files.cnblogs.com/files/xiaohuochai/digit.js"></script>    
<script>
    var canvas = document.getElementById('canvas');
    if(canvas.getContext){
        var cxt = canvas.getContext('2d');
    }
    canvas.height = 100;
    canvas.width = 700;
    function renderDigit(index,num){
        var R = canvas.height/20-1;
        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){
                    cxt.beginPath();
                    cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                    cxt.closePath();
                    cxt.fill();
                }
            }
        }        
    }
    function digitTime(){
        /*獲取時間數據*/
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        //存儲時間數字，由十位小時、個位小時、冒號、十位分鐘、個位分鐘、冒號、十位秒鐘、個位秒鐘這7個數字組成
        var data = [];
        data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
        /*渲染時鐘*/
        //重置畫布寬度，達到清空畫布的效果
        canvas.height = 100;
        for(var i = 0; i < data.length; i++){
            renderDigit(i,data[i]);
        }
    }
    digitTime();
    clearInterval(oTimer);
    var oTimer = setInterval(function(){
        digitTime();
    },500);
</script>

隨機拋物線

　　這節的隨機拋物線運動是下節粒子動畫的預備節。以DOM節點的投擲碰壁為基礎，利用canvas實現一個小球的隨機拋物線運動

　　將小球的運動拆分為x軸和y軸運動。x軸做勻速運動，y軸先做向上的減速運動，再做向下的加速運動。當小球離開畫布區域時，停止定時器

<button id="btn">按鈕</button>
<canvas id="canvas" style="border:1px solid black">當前瀏覽器不支持canvas，請更換瀏覽器後再試</canvas>
<script>
    var canvas = document.getElementById('canvas');
    if(canvas.getContext){
        var cxt = canvas.getContext('2d');
    }
    //聲明canvas的寬高
    var H = 100,W = 200;
    canvas.height = H;
    canvas.width = W;    
    var R = canvas.height/20-1;
    var numArray = [1,2,3,4];
    var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
    btn.onclick = function(){
        //聲明x、y軸坐標
        var x=Math.floor(Math.random() * 60 + 10);
        var y=Math.floor(Math.random() * 60 + 10);
        //聲明x、y軸的步長值
        var stepY = -3*numArray[Math.floor(Math.random()*numArray.length)];
        var stepX = Math.floor(Math.random() * 10 -5);
        //聲明y軸變化值
        var disY = numArray[Math.floor(Math.random()*numArray.length)];
        var color =colorArray[Math.floor(Math.random()*colorArray.length)];
        clearInterval(oTimer);
        var oTimer = setInterval(function(){
            stepY += disY;
            x += stepX;
            y += stepY;
            canvas.height = 100;
            cxt.beginPath();
            cxt.arc(x,y,R,0,2*Math.PI);
            cxt.fillStyle = color;
            cxt.closePath();
            cxt.fill();    
            if(x > W + R || y > H + R){
                clearInterval(oTimer);
            }    
        },50);
    }
</script>

粒子動畫

　　下麵來實現粒子動畫。在時間數字變化的瞬間，由眾多的粒子組成的新數字上重覆生成相同的粒子，並且新生成的粒子做隨機的拋物線運動

　　所以，第一步是先要判斷是哪個或哪些數字在時間更新時發生了變化。然後，通過這些變化信息，生成要運動的小球。在定時器的運行間隔內，對運動小球的狀態進行更新。最後，對時鐘和運行的小球進行統一渲染

<canvas id="canvas" style="width:500px;">當前瀏覽器不支持canvas，請更換瀏覽器後再試</canvas>
<script src="http://files.cnblogs.com/files/xiaohuochai/digit.js"></script>    
<script>
    var canvas = document.getElementById('canvas');
    if(canvas.getContext){
        var cxt = canvas.getContext('2d');
    }
    //聲明canvas的寬高
    var H = 100,W = 700;
    canvas.height = H;
    canvas.width = W;
    //存儲時間數據
    var data = [];
    //存儲運動的小球
    var balls = [];
    //設置粒子半徑
    var R = canvas.height/20-1;
    (function(){
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        //存儲時間數字，由十位小時、個位小時、冒號、十位分鐘、個位分鐘、冒號、十位秒鐘、個位秒鐘這7個數字組成
        data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);    
    })();

    /*生成點陣數字*/
    function renderDigit(index,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){
                    cxt.beginPath();
                    cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                    cxt.closePath();
                    cxt.fill();
                }
            }
        }        
    }

    /*更新時鐘*/
    function updateDigitTime(){
        var changeNumArray = [];
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        var NewData = [];
        NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
        for(var i = data.length-1; i >=0 ; i--){
            //時間發生變化 
            if(NewData[i] !== data[i]){
                //將變化的數字值和在data數組中的索引存儲在changeNumArray數組中
                changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
            }
        }
        //增加小球
        for(var i = 0; i< changeNumArray.length; i++){
            addBalls.apply(this,changeNumArray[i].split('_'));
        }    
        data = NewData.concat();
    }

    /*更新小球狀態*/
    function updateBalls(){
        for(var i = 0; i < balls.length; i++){
            balls[i].stepY += balls[i].disY;
            balls[i].x += balls[i].stepX;
            balls[i].y += balls[i].stepY;    
            if(balls[i].x > W + R || balls[i].y > H + R){
                balls.splice(i,1);
                i--;
            }                
        }
    }

    /*增加要運動的小球*/
    function add
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 設計模式（十四）：代理模式
    一、概述 代理模式為另一個對象提供一個替身或占位符以控制對這個對象的訪問。其實就是代理就是做到類似轉發的功能，針對不同代理，轉發的具體實現不同。 二、解決問題 從原理知道他就是控制客戶對一個對象的訪問，它跟現實中的中介代理類似，只是作為代表做一些受理工作，真正執行的並不是它自己。比如買火車票，外面有 ...
  • 建造者（生成器）模式C++、Java實現
    1、建造者模式UML 圖1. 建造者模式UML 2、C++實現 C++實現類視圖： 圖2. 建造者模式C++實現的類視圖 其中，Product的實現代碼是（ProductA和ProductB的代碼不再列出）： Builder實現代碼是： ConcreteBuilderA的實現代碼是： Concret ...
  • 一、策略模式
    定義：策略模式定義了演算法族，分別封裝起來，讓他們之間可以相互替換，此模式讓演算法的變化獨立於使用演算法的客戶。 一個使用了策略模式案例的UML類圖：(https://github.com/sunhuace/GOF-23.git) 個人見解：策略模式通過封裝演算法族，使用多態的方式持有FlyBehavevi ...
  • 抽象工廠模式的C++、Java實現
    1、抽象工廠模式UML 圖1. 抽象工廠模式的UML 2、C++實現 C++實現類圖為： 圖2. 抽象工廠模式的C++實現類圖 其中，AbstractFactory的實現代碼為： ConcreteFactoryA的實現代碼為： 其中，ConcreteFactory2的代碼與ConcreteFacto ...
  • 一個簡單的通訊服務框架（大家發表意見一起研究）JAVA版本
    最近研究下java語言，根據一般使用的情況，寫了個連接通訊服務的框架； 框架結構 C-Manager-S; 把所有通訊內容抽取成三個方法介面：GetData,SetData,帶返還的Get; 所有數據都處理為byte[];客戶端與服務端和管理器以及服務端有多重處理模式 管理信息： 1.不需要中心管理 ...
  • java SSM 框架 多數據源 代碼生成器 websocket即時通訊 shiro redis 後臺框架源碼
    A 調用攝像頭拍照，自定義裁剪編輯頭像 【新錄針對本系統的視頻教程，手把手教開發一個模塊，快速掌握本系統】B 集成代碼生成器 [正反雙向](單表、主表、明細表、樹形表，開發利器)+快速構建表單; 技術：313596790 freemaker模版技術 ，0個代碼不用寫，生成完整的一個模塊，帶頁面、建表 ...
  • 無阻塞載入和defer、async
    無阻塞載入 把js放在head里，瀏覽器是怎麼去執行它的呢，是按順序載入還是並行載入呢？在舊的瀏覽器下，都是按照先後順序來載入的，這就保證了載入的js依賴不會發生問題。但是少部分新的瀏覽器已經開始允許並行載入js了，也就是說可以同時下載js文件，但是還是按先後順序執行文件的。 下載是非同步的沒問題，但 ...
  • Javascript中的prototype與繼承
    通常來說，javascript中的對象就是一個指向prototype的指針和一個自身的屬性列表。javascript創建對象時採用了寫時複製的理念。 只有構造器才具有prototype屬性，原型鏈繼承就是創建一個新的指針，指向構造器的prototype屬性。 prototype屬性之所以特別，是因為 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類