自學Canvas畫布 隨筆

時間  2019-11-08
標籤 自學 canvas 畫布 隨筆 简体版
原文   原文鏈接

1、Canvas能作什麼?javascript

　　canvas是HTML5中的新元素，可使用javascript用它來繪製圖形、圖標、以及其它任何視覺性圖像。它也可用於建立圖片特效和動畫。若是咱們掌握了完整的命令，咱們能夠用canvas建立豐富的web應用程序。若是咱們想很好的使用canvas，咱們首先應該很好的掌握javascript。java

這篇文章是一篇基礎教程，能瞭解一些設計方法。好比用HTML5 canvas 進行圖形設計。python

2、用HTML5 canvas設計git

　　設計和開發一個web頁面會包含不少的內容，用戶首先須要有一個支持HTML canvas的瀏覽器。github

　　首先，建立一個HTML5文檔頁面，設置document type是HTMl5的；web

　　其次，在頁面body區域添加一個canvas標籤：canvas

　　再次，給這個canvas定義一個id屬性，這樣方便咱們在js中調用它。添加一個寬和高屬性，在canvas標籤中添加一個當瀏覽器不支持的時候顯示給用戶的內容。下面是列子代碼：瀏覽器

<body>
    <canvas id="canvas" width="1024" height="768"   style="display: block;margin: 0 auto;">
        當前瀏覽器不支持Canvas ， 請更換瀏覽器！
    </canvas>
</body>

　　如今咱們建立了一個包含HTML5 canvas 元素的空白畫布，咱們將使用js和canvas元素的方法來建立咱們的圖像。架構

　　添加一個javascript用HTMl5 canvas的方法：函數

<script type="text/javascript">
    var canvas = document.getElementById("canvas");
        
     // canvas 方法
    canvas.width = 1024;
    canvas.height = 768;
        
    var context = canvas.getContext("2d");   // 使用context進行 2D繪圖  
    if(canvas.getContext == undefined){        
        console.log("當前瀏覽器不支持Canvas，請更換瀏覽器！");
        } //不支持的瀏覽器爲undefined        
        
</script>

　　使用javascript來建立畫布，可使用矩形、圓圈和三角形,並使用線、幻燈片和漸變來建立咱們的設計。 
下面是完成的代碼：

 // 畫一個實心三角形        
    context.beginPath();
    context.moveTo(100,100);
    context.lineTo(700,700);
    context.lineTo(100,700);
    context.lineTo(100,100);
    context.closePath();
        
    context.lineWidth = 5;   // 線條寬度
        
    context.strokeStyle = "green";
    context.stroke();     // 繪製線條
        
    context.fillStyle = "red";   //  填充顏色 實心
    context.fill();    
　　

 

// 畫一條直線
    context.beginPath();
    context.moveTo(200,100);
    context.lineTo(700,600);    
    context.closePath();
        
    context.strokeStyle = "black";
    context.stroke();
    // 畫一組弧線    
        context.lineWidth = 5;
        context.strokeStyle = "#005588";        
        
        for(var i = 0;i < 10 ;i++){
            context.beginPath();
            context.arc(50+ i*100 , 60 , 40 , 0 , 2*Math.PI*(i+1)/10 , false );    
            context.closePath();
            
            context.stroke();            
        }
        
        for(var i = 0;i < 10 ;i++){
        context.beginPath();
        context.arc(50+ i*100 , 200 , 40 , 0 , 2*Math.PI*(i+1)/10 , false );    
//        context.closePath();

        context.stroke();        
        }
        
        for(var i = 0;i < 10 ;i++){
        context.beginPath();
        context.arc(50+ i*100 , 340 , 40 , 0 , 2*Math.PI*(i+1)/10 , true );    
//      context.closePath();
        
        context.stroke();            
        }
        
        context.fillStyle = "#005588";
        for(var i = 0;i < 10 ;i++){
        context.beginPath();
        context.arc(50+ i*100 , 480 , 40 , 0 , 2*Math.PI*(i+1)/10 , false );    
//      context.closePath();
        
        context.fill();   //  closePath()對fill函數沒有，當調用fill函數時，canvas會自動將沒有封閉的路徑 收尾相連以後再進行填充
        context.stroke();            
        }

　　咱們能夠將上面的代碼加入window.onload，或者jQuery的ready方法裏，當文檔加載完，將會建立文明的圖形。

3、一些HTML5 canvas 圖像解決方案（附連接）

　　用與HTML5 Canvas元素你能夠開發動態繪圖對象好比如可視化信息或數據圖。HTML5 canvas 能夠在javascript的幫助下很容易的繪製二維圖形。讓咱們來看一下HTML5 canvas元素的一些數據圖應用。

　　1. HumbleFinance

　　HumbleFinance是用js開發的一個開源的數據可視化圖表，它用HTML5 canvas生成可視化圖表數據，它能夠用一個軸來展現任何兩個二維的數據集。

　　地址： http://www.humblesoftware.com/finance/index

　　2.Graphr

　　Graphr是一個用HTML5 canvas寫的一個計算器應用，有每一個圖像計算器應有的基本功能。

　　地址：http://www.graphr.org/

　　3.用HTML5和jQuery建立的華麗的動畫餅圖

　　咱們能夠用javascript和HTML5來建立一個交互式餅圖，有華麗的動畫效果。這在以前只能用flash來完成，如今也可使用最新的HTML5技術了。

　　地址：http://cyberpython.github.com/AwesomeChartJS/

　　4. AwesomeJS

　　AwesomeJS 可以讓你建立簡單有用的圖表，而僅需幾行代碼便可。這是一個基於HTML5和canvas的javascript庫。

　　地址：http://cyberpython.github.com/AwesomeChartJS/

　　5.Ticker Plot（股票圖）

　　Ticker Plot（股票圖）是每個在工做是使用圖標的web開發人員都必備的一個圖表工具。這是一個開源的項目，它使用HTML5 canvas在畫布上繪製圖形符號和鼠標事件。　　

　　Ticker Plot（股票圖）是專門爲股票行情和技術分析設計的。

4、絢麗的倒計時效果Canvas繪圖與動畫效果。

　　一、倒計時計數的基本架構

HTML代碼

<body>
    <canvas id="canvas"  style=" display: block;margin: 0 auto;">
        當前瀏覽器不支持Canvas ， 請更換瀏覽器！
    </canvas>    
        
    <script type="text/javascript" src="js/digit.js"></script>  <!--數字1-9 加上：的點陣圖-->
    <script type="text/javascript" src="js/countdown.js"></script>  <!--實現倒計時的主邏輯文件-->                
</body>

countdown.js代碼（不涉及具體邏輯，具體倒計時邏輯下次更新）

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;

window.onload = function(){
    
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
    
    render( context );
}

function render( cxt ){
    
    var hours = 12;
    var minute = 36;
    var second = 59;
    // 小時
     renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt ); 
     // 每一個字水平位置7直徑,7*2 = 14半徑+1 = 15     
     renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt );
    
     // 冒號 （4*2+1）= 9  digit.js中 10表明 ：
     renderDigit( MARGIN_LEFT+ 30*(RADIUS+1) , MARGIN_TOP , 10 , cxt );
    // 分鐘 
      renderDigit( MARGIN_LEFT+ 39*(RADIUS+1) , MARGIN_TOP , parseInt(minute/10) , cxt );
        renderDigit( MARGIN_LEFT+ 54*(RADIUS+1) , MARGIN_TOP , parseInt(minute%10) , cxt );
    
     // 冒號 （4*2+1）= 9  digit.js中 10表明 ：
     renderDigit( MARGIN_LEFT+ 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt );
    // 秒
      renderDigit( MARGIN_LEFT+ 78*(RADIUS+1) , MARGIN_TOP , parseInt(second/10) , cxt );
        renderDigit( MARGIN_LEFT+ 93*(RADIUS+1) , MARGIN_TOP , parseInt(second%10) , cxt );    
}

function renderDigit(x , y , num , cxt){
    
    cxt.fillStyle = "#005588";
    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( x+j * 2 * (RADIUS+1) + (RADIUS+1) ,  y+i * 2 * (RADIUS+1) + (RADIUS+1) , RADIUS , 0 , 2*Math.PI );
                    cxt.closePath();
                                        
                    cxt.fill();                
            }            
        }        
    }            
}

效果以下：

　

　　這部分目前正在學習中，後續學習會繼續與你們探討。 蟹蟹，請多指教。

 另附digit.js代碼

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]
        ]//:
    ];
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程