canvas標籤在頁面中只顯示一個設定背景色的畫布，如果要產生新內容或者進行畫圖操作，需要藉助canvas API(HTML5的內置對context 對象)和javascript操作實現畫圖或者其他圖像操作。
Canvas的API
canvas主要屬性和方法
|
方法 |
描述 |
|
save() |
保存當前環境的狀態 |
|
restore() |
返回之前保存過的路徑狀態和屬性 |
|
createEvent() |
|
|
getContext() |
返回一個對象，指出訪問繪圖功能必要的API |
|
toDataURL() |
返回canvas圖像的URL |
顏色、樣式和陰影屬性和方法
|
屬性 |
描述 |
|
fillStyle |
設置或返回用於填充繪畫的顏色、漸變或模式 |
|
strokeStyle |
設置或返回用於筆觸的顏色、漸變或模式 |
|
shadowColor |
設置或返回用於陰影的顏色 |
|
shadowBlur |
設置或返回用於陰影的模糊級別 |
|
shadowOffsetX |
設置或返回陰影距形狀的水平距離 |
|
shadowOffsetY |
設置或返回陰影距形狀的垂直距離 |
|
方法 |
描述 |
|
createLinearGradient() |
創建線性漸變（用在畫布內容上） |
|
createPattern() |
在指定的方向上重複指定的元素 |
|
createRadialGradient() |
創建放射狀/環形的漸變（用在畫布內容上） |
|
addColorStop() |
規定漸變對象中的顏色和停止位置 |
線條樣式屬性和方法
|
屬性 |
描述 |
|
lineCap |
設置或返回線條的結束端點樣式 |
|
lineJoin |
設置或返回兩條線相交時，所創建的拐角類型 |
|
lineWidth |
設置或返回當前的線條寬度 |
|
miterLimit |
設置或返回最大斜接長度 |
矩形方法
|
方法 |
描述 |
|
rect() |
創建矩形 |
|
fillRect() |
繪製"被填充"的矩形 |
|
strokeRect() |
繪製矩形（無填充） |
|
clearRect() |
在給定的矩形內清除指定的像素 |
Canvas的API-路徑方法
|
方法 |
描述 |
|
fill() |
填充當前繪圖（路徑） |
|
stroke() |
繪製已定義的路徑 |
|
beginPath() |
起始一條路徑，或重置當前路徑 |
|
moveTo() |
把路徑移動到畫布中的指定點，不創建線條 |
|
closePath() |
創建從當前點回到起始點的路徑 |
|
lineTo() |
添加一個新點，創建從該點到最後指定點的線條 |
|
clip() |
從原始畫布剪切任意形狀和尺寸的區域 |
|
quadraticCurveTo() |
創建二次貝塞爾曲線 |
|
bezierCurveTo() |
創建三次方貝塞爾曲線 |
|
arc() |
創建弧/曲線（用於創建圓形或部分圓） |
|
arcTo() |
創建兩切線之間的弧/曲線 |
|
isPointInPath() |
如果指定的點位於當前路徑中，返回布爾值 |
Canvas的API-轉換方法
|
方法 |
描述 |
|
scale() |
縮放當前繪圖至更大或更小 |
|
rotate() |
旋轉當前繪圖 |
|
translate() |
重新映射畫布上的 (0,0) 位置 |
|
transform() |
替換繪圖的當前轉換矩陣 |
|
setTransform() |
將當前轉換重置爲單位矩陣。然後運行 transform() |
Canvas的API-文本屬性和方法
|
屬性 |
描述 |
|
font |
設置或返回文本內容的當前字體屬性 eg:40px 黑體 |
|
textAlign |
設置或返回文本內容的當前對齊方式 eg:center |
|
textBaseline |
設置或返回在繪製文本時使用的當前文本基線 |
|
方法 |
描述 |
|
fillText() |
在畫布上繪製"被填充的"文本 eg:"黑馬程序員!!!",200,60,400 |
|
strokeText() |
在畫布上繪製文本（無填充） |
|
measureText() |
返回包含指定文本寬度的對象 |
Canvas的API-圖像繪製方法
|
方法 |
描述 |
|
drawImage() |
向畫布上繪製圖像、畫布或視頻 chrome不支持 |
|
屬性 |
描述 |
|
width |
返回 ImageData 對象的寬度 |
|
height |
返回 ImageData 對象的高度 |
|
data |
返回一個對象，其包含指定的 ImageData 對象的圖像數據 |
|
方法 |
描述 |
|
createImageData() |
創建新的、空白的 ImageData 對象 |
|
getImageData() |
返回 ImageData 對象，該對象爲畫布上指定的矩形複製像素數據 |
|
putImageData() |
把圖像數據（從指定的 ImageData 對象）放回畫布上 |
Canvas的API
圖像合成屬性
|
屬性 |
描述 |
|
globalAlpha |
設置或返回繪圖的當前 alpha 或透明值 |
|
globalCompositeOperation |
設置或返回新圖像如何繪製到已有的圖像上 |
Canvas的API
其他方法
|
屬性 |
描述 |
|
globalAlpha |
設置或返回繪圖的當前 alpha 或透明值 |
|
globalCompositeOperation |
設置或返回新圖像如何繪製到已有的圖像上 |
1、畫一條線段
2、畫一個圓形
3、畫一個矩形
4、寫一段文字畫布中
5、將一幅圖片添加到畫布中
6、反轉圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="800" style="background: yellow"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.moveTo(20,20);
context.lineTo(100,20);
context.stroke();
context.closePath();
context.beginPath();
context.arc(150,150,50,0,360,false);
context.stroke();
context.closePath();
context.beginPath();
context.arc(150,50,50,0,360,false);
context.fillStyle = "#ff0000";
context.fill();
context.stroke();
context.closePath();
context.rect(250,50,100,50);
context.stroke();
context.strokeRect(250,120,100,50);
context.fillRect(250,250,100,50);
context.save();
context.translate(20,270);
context.rotate(-10*Math.PI/180);
var image = new Image();
image.src = "xiaomm.jpg";
context.drawImage(image,20,330,200,200);
context.restore();
context.save();
context.translate(20,20);
context.moveTo(0,0);
context.lineTo(20,100);
//弧度 == math.pi
context.rotate(10*Math.PI/180);
context.stroke();
context.restore();
</script>
</body>
</html>