HTML5新標籤

基本用法

首先在body中寫個<canvas>，設定大小，我的建議大小要在行內設置，否則在部分狀況下會發生錯誤。

CSS部分

給canvas加個邊框，這邊框只是爲了方便看出canvas的邊界，加不加均可以。

<style type="text/css">
canvas{
    border:1px solid #000;
}
</style>

HTML部分

<canvas id="canvas" width="500" height="500"></canvas>

JSt部分

canvas是一個畫布，要操做它，須要使用javascript，因此咱們要在javascript中獲取它

var canvas = document.getElementById('canvas');

而後設置畫畫的環境，canvas是一個功能很強大的標籤，這裏我先簡述下2d環境下的

var context = canvas.getContext('2d');

上述設置都作好後，就能夠在畫布上畫東西了，例：

畫一條線

context.lineWidth = 4;//設置畫筆粗細
context.strokeStyle = 'red';//設置畫筆顏色

context.beginPath();//開始路徑
context.moveTo(100,100);//落筆點（100,100）
context.lineTo(100,200);//移動到（100,200）點上
context.closePath()//結束路徑
context.stroke();//上色

結果如圖：

closePath()方法有閉合路徑的功能，也就是說無論最後一個點在哪，它都會自動生成一條線條將第一個點與最後一個點鏈接起來，上述例子因爲是線條，看出不來，這個功能畫幾何圖形的時候能給你帶來些許便利，例：

context.beginPath();//開始路徑
context.moveTo(100,100);
context.lineTo(100,200);
context.lineTo(200,200);
context.closePath()//結束路徑
context.stroke();

效果如圖：

 

<canvas> 2d環境量的繪製圖形屬性

屬性	簡介
canvas	指向繪圖環境所屬的canvas對象
fillstyle	指定該繪圖環境在後續的圖形填充操做中所使用的顏色，漸變色或方案
font	設定在調用繪圖環境對象的fillText()或strokeText()方法時，所使用的字型
globalAlpha	指定全局透明度，取值範圍0~1
globalCompsiteOperation	將某個物體繪製在其餘的物體之上時採用的繪製方式，取值範圍source-atop, source-in, source-out, source-over, destination-top, destination-in, destination-out, destination-over, lighter, copy, xor
lineCap	該值告訴瀏覽器如何繪製線段的端點，取值範圍butt, round, square
lineWidth	線條的寬度
lineJoin	線條繪製交叉的時候的繪製方式，bevel, round, miter
miterLimit	如何繪製miter形式的線段焦點
shadowBlur	延伸的陰影效果，取值爲非負的無窮量的double值，該值爲高斯模糊方程式中的參數值
shadowColor	陰影的顏色值
shadowOffsetX	陰影效果的水平方向偏移量
shadowOffsetY	陰影效果的垂直方向偏移量
strokeStyle	對路徑描邊時所使用的繪製風格
textAlign	fillText()或strokeText()方法繪製的時候，所畫文本的水平對齊方式
textBaseline	fillText()或strokeText()方法繪製的時候，所畫文本的水平對齊方式