前言：花了4天半終於看完了《Head First HTML5》，這本書的學習給我最大的感受就是，自己知識的淺薄，還有非常多非常棒的技術在等著我呢。[熊本表情]扶朕起來，朕還能學！
H5新增標簽裡面最喜歡的就是<canvas>，所以這次就用它寫了個小demo，算是表達一下，對於它的愛意吧。
正文：
廢話不多說，上代碼~
html部分
<canvas id="myCanvas" width="800" height="800">想看圖？快去升級你的浏覽器吧~</canvas>
html部分只有這簡單的一句，<canvas>內部包含的文本在浏覽器不支持時輸出，這真的是非常方便的用法呢（此處省略<html><body>等必備標簽）
js部分
window.onload = function(){
//獲取canvas的引用
var myCanvas = document.getElementById("myCanvas");
//獲取context的引用
var context = myCanvas.getContext("2d");
//臉部
drawRect(context,15,0,90,130,"#ff813e");
//頭發
context.fillRect(10,0,100,40);
//左邊鬓角
context.fillRect(10,40,20,20);
//右邊鬓角
context.fillRect(90,40,20,20);
//左邊眼睛
//左邊眼睛眼眶
drawRect(context,25,70,25,15,"#fff");
//左邊眼睛眼球
drawRect(context,38,70,12,15,"#3d46ce");
//右邊眼睛
//右邊眼眶
drawRect(context,70,70,25,15,"#fff");
//右邊眼睛眼球
drawRect(context,70,70,12,15,"#3d46ce");
//鼻子
drawRect(context,54,88,12,12,"#ba7b56");
//嘴巴
drawRect(context,38,106,42,20,"#450000");
//舌頭
drawRect(context,50,116,20,10,"#f494b9");
};
雖然看著有這麼十幾行代碼，但是重復的部分很多，也就四個東西：
(1)document.getElementById(id值)
獲取到我們的canvas，以便在以後的代碼中運用它展現我們美麗的創作
(2)canvas.getContext("2d")
獲取畫布的上下文，返回一個對象，該對象中有非常多的方法可以為我們創作提供方便。（PS：雖然這裡是2d，但並不代表就一定有3d，不過這也是件好事，說不定它會是由你實現的呢？）
(3)drawRect(context,x,y,rectWidth,rectHeight,color)
這是一個自定義函數，它將canvas.getContext("2d")返回的對象作為參數傳入，以便我們在函數中調用該對象包含的各種方法。同時傳入想要繪制的點的坐標，以及繪制的矩形的寬度和高度，還有就是，我們填充矩形所用的顏色。
(4)context.fillRect(x,y,rectWidth,rectHeight)
偶偶偶耶，終於出現了，我們調用了一個context引用對象的方法，它為我們在畫布上繪制出一個黑色矩形。為啥是黑色？因為這是默認顏色啊，如果你想改變顏色，哼哼，那就接著看下面的部分。
接下來，我們就有請drawRect函數登場
function drawRect(context,x,y,rectWidth,rectHeight,color){
//開始一個路徑
context.beginPath();
//起始位置移動到x,y參數指定的點
context.moveTo(x,y);
//向坐標為(x+rectWidth,y)的點畫一條路徑
context.lineTo(x+rectWidth,y);
//向坐標為(x+rectWidth,y+rectHeight)的點畫一條路徑
context.lineTo(x+rectWidth,y+rectHeight);
//向坐標為(x,y+rectHeight)的點畫一條路徑
context.lineTo(x,y+rectHeight);
//閉合路徑
context.closePath();
//設置顏色
context.fillStyle = color;
//填充由我們所繪路徑形成的矩形
context.fill();
//設置顏色
context.fillStyle = "#000";
//設置描繪線條的寬度
context.lineWidth = 2;
//描線
context.stroke();
}
在drawRect函數中，我們采用了一條邊一條邊的畫矩形，當然你可以用其中用到的方法畫出你喜歡的各種形狀。其中要注意的是，我們畫出的路徑是不可見的，如果想看到路徑，可以用stroke方法描出我們的路徑，而此處我們畫的路徑是一個閉合的矩形，調用fill方法，則會用fillStyle指定的顏色填充該路徑指定的內部區域。所以想要改變填充或者描線的顏色，就試試fillStyle屬性吧~
至此，我們的demo已經完成啦~來看看效果吧~
啊哈哈哈哈啊哈哈哈哈，有沒有愛上canvas呢？（canvas說：就算你不愛我，也有很多人愛得我死去活來的，不過，如果你要愛我的話，勉強也可以接受啦，╮(╯▽╰)╭）
後話：天氣熱了，大家注意防暑，大中午的就別出門了，哪涼快哪待著去吧——來自作死中午出門吃飯，結果中暑頭痛要命的家伙的建議