canvas學習一之canvas的基本使用
一、canvas
1.canvas是html5中的一個標籤，通過canvas的getContext得到上下文可以繪圖等操作。canvas通過js進行API操作，可以得到想要的圖形或動畫。
2.html5中canvas有兩套尺寸，第一個是元素本身的大小，在標籤的屬性裡指定；還有一個是繪圖表面的大小，標籤屬性和css都可以修改。預設情況下，canvas的元素大小和繪圖表面都是300*150；當兩者不一致時，瀏覽器會對畫圖表面進行縮放，使其符合元素的大小。舉個例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta 當沒有在標籤中指定寬高時，元素本身預設300*150，繪圖表面也是300*150，當在css中修改寬高時，只修改元素本身大小，為600*300，繪圖表面沒有修改，還是300*150，兩者不相等，於是瀏覽器會對畫布進行縮放，使之符合大小。這裡是橫向豎向都放大2倍。
所以，當使用canvas時，最好在標籤寫好寬高，如果不可以，還可以使用js指令碼給canvas加上寬高。
二、2個屬性3個方法
2個屬性：
width 畫圖表面的寬；
height 畫圖表面的高
3個方法：
getContext()：獲得繪圖物件，一般getContext(“2d”)獲得2d繪圖物件；
toDateURL(type,quality)：獲得一個數據地址，這個是將canvas畫布中的內容轉化為影象，再將影象轉為base64編碼，最後得到的是一串字串。type有image/png,image/jpeg兩種，雖然base64有image/gif,但經我測試用火狐測試，不可以轉成gif(?)。quality是圖片的質量，從0-1.0的double數值；
toBlob(callback,type,args) Blob二進位制大物件，將圖片轉成Blob.callback一個以獲得的blob為引數的回撥函式，type是圖片型別，args圖片質量；
將上面程式碼，修改一下，得到兩個方法的照片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兩種方法，將canvas轉成影象</title>
<style type="text/css">
body {
background: #dddddd;
}
#canvas{
margin: 20px;
padding: 20px;
background: #ffffff;
border: thin inset #aaaaaa;
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<canvas id='canvas' width="600" height="300">
不支援canvas
</canvas>
<img id="img">
</body>
<script type="text/javascript">
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
context.font = '38pt Arial';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';
context.fillText("Hello Canvas", canvas.width/2 - 150,
canvas.height/2 + 15);
context.strokeText("Hello Canvas", canvas.width/2 - 150,
canvas.height/2 + 15);
var href = canvas.toDataURL("image/png", 0.1);
var image = document.getElementById("img");//靜態獲取img節點
image.src=href;
canvas.toBlob(function(blob){
var newImg = document.createElement("img"),//動態生成img節點
url = URL.createObjectURL(blob);
newImg.onload = function() {
URL.revokeObjectURL(url);//載入完成，釋放url
};
newImg.src = url;
document.body.appendChild(newImg);
},"image/png",0.1)
</script>
</html>兩者影象地址不一致：
toDataURL得到data:image/png;base64開頭的字串
toBlob得到blob:null/d871fc67-7a9a-41e1-82b2-9954eca7d198
toDataURL得到影象可以另存為儲存到硬碟，但是blob不可以。