canvas學習--準備

一）canvas標籤

　　屬性：

　　　　一、width 和 height 控制canvas寬高；

　　　　二、style添加基本樣式

　　　　三、class，id屬性

　　　　四、標籤內添加一行文本，主要用於瀏覽器不支持canvas標籤時顯示

<canvas id="myCanvas" width="1020px" height="600px" class="myCanvas">
        你的瀏覽器不支持Canvas
</canvas>

　　爲canvas添加3px邊框後 畫布如圖

　　

 

二）文檔對象模型

　　將<canvas>放入web頁面時，第一件事情就是，看整個頁面是否已經加載，而且開始操做以前是否全部HTML元素都已展示。經過 addEventListener() 方法監聽 window 的 load 事件。

　　

window.addEventListener('load', eventWindowLoaded, false)

function eventWindowLoaded () {
    canvasApp() //包含整個canvas應用程序
}

 

三）引用canvas元素

　　

function canvasApp () { 
    var myCanvas = document.getElementById('myCanvas'); 
}

 

四）檢測瀏覽器支持狀況　　

　　調用 getContext() 方法檢測瀏覽器是否支持canvas。

function canvasApp () { 
    var myCanvas = document.getElementById('myCanvas'); 
    
    if(!myCanvas || !myCanvas.getContext){
        return;
    }
    
    //繪製開始
}

 

五）獲取2D環境

function canvasApp () { 
    var myCanvas = document.getElementById('myCanvas'); 
    
    if(!myCanvas || !myCanvas.getContext){
        return;
    }
    
    var ctx = myCanvas.getContext('2d');
    //......
}

 

六）實例小試 -- 紅色矩形

function canvasApp () { 
    var myCanvas = document.getElementById('myCanvas'); 
    
    if(!myCanvas || !myCanvas.getContext){
        return;
    }
    
    var ctx = myCanvas.getContext('2d');
    ctx.fillStyle = '#f36';
    ctx.fillRect(10,10,200,150);
}

　　效果圖：

　　

 

七）座標系

　　canvas座標系和數學裏的座標系稍有差異，canvas座標系以下圖所示