<!DOCTYPE html> <html> <head> <title>canvas詳解</title> </head> <body> <canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50 auto;"></canvas> </body> </html>
其中創建一個canvas元素就可以創建一個畫布，但是如果你不設置參數的話，在瀏覽器上面是不顯示的。所以可以設置一些參數讓畫布顯示出來。此外畫布的寬度可以在標簽內設置，如果在css中設置寬度，高度，其實設置的是畫布的顯示寬度，高度。此外這里面的高度，寬度都沒有設置px，不需要設置這些。
如何使用canvas畫布操作，需要在javascript中進行如下操作
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
首先獲取canvas畫布，然后在獲取上下文環境context;
在html文件中加入下面代碼
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=1024;
canvas.height=768;//通過這兩種方式也可以設置canvas的大小；
var context=canvas.getContext("2d");
}
</script>
如果你想讓瀏覽器不兼容這個畫布的時候顯示"瀏覽器不兼容的字樣的時候"可以在html中canvas標簽內填寫<canvas id="canvas">瀏覽器不兼容</canvas>
也可以在js中設置
if(canvas.getContext("2d")){
var context=canvas.getContext("2d");
} else{
alert("瀏覽器不兼容");
}
現在來看一下如何畫一條線
Draw a line
context.moveTo(100,100)
context.lineTo(700,700)
context.stroke()
canvas繪圖是一種基於狀態的繪圖
也就是說他是先想好如何繪圖，設置好狀態，然后再來繪制圖形，上面的moveTo().lineTo()，設置的就是繪圖狀態
表示的是一個線段，moveTo(x,y)表示的是從點(x,y)開始繪制線段，lineTo(x1,y1)表示這個線段的終點是點(x1,y1);然后真正繪制的函數是stroke(),用來繪制線段，最終繪制好了一條線段。
此外還可以設置線條的一些屬性，在stroke之前，比如
canvas.lineWidth=5;設置線條的寬度 canvas.strokeStyle="#eeddcc".或者canvas.fillStyle="";設置線條的樣式，主要是顏色。
context.moveTo(100,100)
context.lineTo(700,700)
context.lineTo(240,340)
context.stroke()
這樣畫出來的是一條折線，起點是(100,100),畫到(700,700)，然后在以(700,700)為起點，畫到(240340).
如果 再在后面加上一句conText.lineTo(100,100)就成了一個三角形了。
如果我們要給這個三角形着色的話，就需要以下操作
將stroke()換成fill();
context.moveTo(100,100)
context.lineTo(700,700)
context.lineTo(240,340)
canvas.fillStyle="#eeddcc".
context.fill();
如果我們在后面再加上這樣一句；
context.moveTo(100,100);
context.lineTo(367,345);
context.lineTo(798,456);
context.lineTo(100,100);
context.fillStyle="rgb(2,100,30)";
context.fill();
context.lineWidth=5;
context.strokeStyle="red";
context.stroke();
表示的是在這個重了顏色的三角形上給他的邊緣在畫一下，最終結果是這個三角形的填充色是rgb(2,100,30)，邊框線的顏色是red；
上面講述的都是畫一個形狀，如果畫兩個圖像呢？
context.moveTo(100,100);
context.lineTo(200,200);
context.lineTo(100,456);
context.lineTo(100,100);
context.lineWidth=5;
context.strokeStyle="rgb(2,100,30)";
context.stroke();
context.moveTo(120,100);
context.lineTo(220,200);
context.strokeStyle="red";
context.stroke();最后你會發現這兩個圖像都是這個顏色red，為什么會出現這種原因呢？？？
因為之前我們都說過canvas繪圖是狀態繪圖，在繪制第二個圖形時，第一個圖形的狀態又重新執行了一次，然而顏色卻是以最后的顏色執行的。所以都是紅色，並且線的粗細也一樣。
另外還要注意，如果上面設置的是填充，下面設置的是畫線，怎是不一樣的。注意了。
最后這里面我們設置畫布的大小，以及線的寬度都沒有加px；注意了奧！
那我們如何畫兩個及以上圖像且設置他們不同屬性啊。
這時候我們就要在路徑開始前加上一句context.beginPath(),結束之后加上一句context.closePath();
這樣在這兩句之間的路徑只會在下面最近的繪制中執行，下面的下面的繪制不會在執行了。
context.lineWidth=5;
context.beginPath();
context.moveTo(120,100);
context.lineTo(220,200);
context.closePath();
context.strokeStyle="red";
context.stroke();
context.beginPath();
context.moveTo(100,100);
context.lineTo(200,200);
context.lineTo(100,456);
context.lineTo(100,100);
context.closePath();
context.strokeStyle="rgb(2,100,30)";
context.stroke();
結果顯示如下
