canvas的使用與image元素頗為一致，都是在指定的位置開辟出一個承載的容器。它只有兩個屬性，width與height，這兩個屬性都是可選的，如果都沒有賦值默認為寬300高150像素。
可以用id標示canvas元素，也可以為其如同一張普通的圖片一樣設定樣式，但是這些樣式對其產生的圖像沒有什么影響。如果不指定樣式，其默認為透明。
在初始狀態(tài)下canvas是空白的，所以我們需要用腳本進行繪圖。在繪圖之前，我們需要渲染上下文，它可以通過canvas元素對象的getContext方法來獲取，與此同時我們還可以得到畫圖所需要用到的函數。getContext() 接受一個用于描述其類型的值作為參數，在目前似乎只支持2d一個屬性，將來也許在3d繪圖得到支持以后可以使用其它的參數，但目前先不要去嘗試了。
例：
<canvas id="tutorial" ...></canvas>
<script type="text/javascript">
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
</script>
對于canvas元素，我們必須考慮瀏覽器的支持問題，對于較新的canvas元素，瀏覽器對它的支持并不完全，因此我們應該采取一些措施。最簡單的方法就是在標簽中寫下失敗的提示信息，則會在頁面展示這些信息。此外，canvas在safari瀏覽器中不需要加尾標簽，但是在FF中并不支持這樣，我們應該統(tǒng)一加上這個尾標簽。
瀏覽器的支持可以進行JS檢測，代碼如下：
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
? var ctx = canvas.getContext('2d');
? // drawing code here
} else {
? // canvas-unsupported code here
}
在此貼下mozilla的教學代碼模板，此后所有代碼均采用mozilla的教學代碼，并非筆者較懶，mozilla的教學代碼確實要略好一點，望諒解。
<html>
? <head>
??? <title>Canvas tutorial</title>
??? <script type="text/javascript">
????? function draw(){
??????? var canvas = document.getElementById('tutorial');
??????? if (canvas.getContext){
????????? var ctx = canvas.getContext('2d');
??????? }
????? }
??? </script>
??? <style type="text/css">
????? canvas { border: 1px solid black; }
??? </style>
? </head>
? <body onload="draw();">
??? <canvas id="tutorial" width="150" height="150"></canvas>
? </body>
</html>
通過上述的模板我們可以開始canvas的第一步學習了，在代碼中我們看到了draw的函數，它被置于頁面完全加載后執(zhí)行。當然我們并不推薦這樣書寫代碼，應該在文件頭以JS的形式進行書寫：
window.onload = draw();
這樣的書寫方式比較合乎規(guī)范，也達到了頁面分離原則。因此我們將代碼修改為：
<html>
? <head>
??? <title>Canvas tutorial</title>
??? <script type="text/javascript">
????? function draw(){
??????? var canvas = document.getElementById('tutorial');
??????? if (canvas.getContext){
????????? var ctx = canvas.getContext('2d');
??????? }
????? }
window.onload = draw();
??? </script>
??? <style type="text/css">
????? canvas { border: 1px solid black; }
??? </style>
? </head>
? <body>
??? <canvas id="tutorial" width="150" height="150"></canvas>
? </body>
</html>
在此處提出window.onload與draw的次序問題，WEB前端代碼是逐行執(zhí)行的，對函數的前后順序按理必須嚴格，但是大部分瀏覽器都會有這樣的一個優(yōu)化，也就是如果先讀取window.onload = draw();一句時，會等待之后的draw函數的載入，當頁面加載完成之前載入該函數則可以執(zhí)行。不過我建議，必須按順序書寫，火狐瀏覽器對這種代碼的優(yōu)化是不支持的，而前端的JS要求是兼容所有的瀏覽器。所以，標準必須遵守。
好了，canvas繪畫的道路正式開始了，讓我們期待吧~
轉載于:https://www.cnblogs.com/xiao-yao/archive/2012/02/08/2342112.html
來源：https://www.icode9.com/content-4-291051.html
