瀏覽器支持：
IE 9，Opera，Firefox , Chorme , Safari
提示：
1、<canvas>標籤只是容器，必須使用腳本來繪製圖形。
2、fillStyle在fillRect()之後無效，只會顯示默認顏色（#000000）。
3、<canvas>標籤width默認值300，height默認值150。
4、重設<canvas> 標籤的width和height值，畫布內容會清空。
5、我們可以在<canvas> 標籤的開始標籤和結束標籤之間可以放置一段文本，當瀏覽器不支持<canvas> 標籤時，這段文本將顯示在<canvas> 標籤所在的位置上，使用者就會明白<canvas> 標籤不適用於此瀏覽器。
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>test</title>
<!--[if lt IE9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<canvas id="test_canvas">此瀏覽器不支持，內容未顯示。</canvas>
<script>
var c = document.getElementById("test_canvas");
c.setAttribute("width","300");
c.setAttribute("height","300");
var cObj = c.getContext("2d");
cObj.fillStyle = "lightBlue";
cObj.fillRect(0,0,300,300);
</script>
</body>
</html>效果：
*說明：canvas標籤id序號與下方示意圖中的序號一致。（例如：id爲canvas01的canvas畫布內容爲示意圖中的1.）
矩形、陰影、漸變、重複
<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8">
<title>canvas</title>
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="description"
content="canvas">
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<style>
body, h3 {
padding: 0;
margin: 0;
}
canvas {
border: 1px solid #abcdef;
}
ol {
width: 1000px;
display: table;
boder-collapse: separate;
border-spacing: 15px;
counter-reset: listItems; //計數器，display：inline-block導致li元素序號不顯示，通過計數器添加序號
}
.tbRow {
display: table-row;
}
li {
display: table-cell;
}
li:before {
content: counter(listItems) ".";
counter-increment: listItems;
}
#img09 {
width: 100px;
height: 50px;
display: none;
}
</style>
<script>
//通過添加僞元素實現單元格換行
function addElement(tgEle){
var addEle = document.createElement("::after");
addEle.className = "tbRow";
$(addEle).insertAfter(tgEle);
}
$(document).ready(function() {
var liLists = document.getElementsByTagName("li");
for(var i=0,j=liLists.length;i<j;i++){
if((i + 1) % 4 == 0){
//直接將添加語句寫在if內部會導致只作用在最後一個符合條件的元素上，所以必須通過函數調用的方式，才能作用於每個符合條件的元素上
addElement(liLists[i]);
}else{
continue;
}
}
});
</script>
</head>
<body>
<h3>矩形、漸變、陰影、重複</h3>
<ol>
<li>
<!--繪製一個矩形(100*100)-->
<canvas id="canvas01"></canvas>
<script>
var c01 = document.getElementById("canvas01");
var ctx01 = c01.getContext("2d");
ctx01.fillStyle = "#000000"; //矩形樣式，必須在fillRect之前。
ctx01.fillRect(0,0,100,100); //矩形繪製
</script>
</li>
<li>
<!--繪製一個矩形(300*300)，超出canvas容器大小的部分會隱藏-->
<canvas id="canvas02"></canvas>
<script>
var c02 = document.getElementById("canvas02");
var ctx02 = c02.getContext("2d");
ctx02.fillStyle = "#000000";
ctx02.fillRect(0,0,300,300); //canvas容器默認大小爲300*150
</script>
</li>
<li>
<!--繪製一個矩形(100*20)-->
<canvas id="canvas03"></canvas>
<script>
var c03 = document.getElementById("canvas03");
var ctx03 = c03.getContext("2d");
ctx03.strokeStyle = "#000000";
ctx03.strokeRect(0,100,100,20); //起點座標（0,100），邊長100，寬20
</script>
</li>
<li>
<!--請將 shadowColor 屬性與 shadowBlur 屬性一起使用，來創建陰影。單一使用陰影效果無效。-->
<canvas id="canvas04"></canvas>
<script>
var c04 = document.getElementById("canvas04");
var ctx04 = c04.getContext("2d");
ctx04.shadowColor = "#f1a2d3";
ctx04.shadowBlur = 10;
ctx04.fillStyle = "#000000";
ctx04.fillRect(0,0,100,100);
ctx04.shadowColor = "#5ea123";
ctx04.shadowOffsetX = 20; //陰影向右偏移20
ctx04.shadowOffsetY = 10; //陰影向下偏移10
ctx04.fillRect(150,20,50,80);
</script>
</li>
<li>
<!--線性漸變-->
<canvas id="canvas05"></canvas>
<script>
var c05 = document.getElementById("canvas05");
var ctx05 = c05.getContext("2d");
var gradient05 = ctx05.createLinearGradient(0,0,100,100);
gradient05.addColorStop(0,"red");
gradient05.addColorStop(0.2,"orange");
gradient05.addColorStop(0.4,"yellow");
gradient05.addColorStop(0.6,"green");
gradient05.addColorStop(0.8,"blue");
gradient05.addColorStop(1,"purple");
ctx05.fillStyle = gradient05;
ctx05.fillRect(0,0,100,100);
</script>
</li>
<li>
<!--線性漸變-->
<canvas id="canvas06"></canvas>
<script>
var c06 = document.getElementById("canvas06");
var ctx06 = c06.getContext("2d");
var gradient06 = ctx06.createLinearGradient(0,0,100,0);
gradient06.addColorStop(0,"red");
gradient06.addColorStop(0.2,"orange");
gradient06.addColorStop(0.4,"yellow");
gradient06.addColorStop(0.6,"green");
gradient06.addColorStop(0.8,"blue");
gradient06.addColorStop(1,"purple");
ctx06.fillStyle = gradient06;
ctx06.fillRect(0,0,100,100);
</script>
</li>
<li>
<!--徑向漸變-->
<canvas id="canvas07"></canvas>
<script>
var c07 = document.getElementById("canvas07");
var ctx07 = c07.getContext("2d");
var gradient07 = ctx07.createRadialGradient(50,50,5,60,60,100);
gradient07.addColorStop(0,"red");
gradient07.addColorStop(1,"blue");
ctx07.fillStyle = gradient07;
ctx07.fillRect(0,0,100,100);
</script>
</li>
<li>
<!--徑向漸變-->
<canvas id="canvas08"></canvas>
<script>
var c08 = document.getElementById("canvas08");
var ctx08 = c08.getContext("2d");
//起點x、y座標和結束點x、y座標分別且都爲圖形x、y座標的一半可以從正中心開始徑向。
var gradient08 = ctx08.createRadialGradient(50,50,3,50,50,60);
gradient08.addColorStop(0,"red");
gradient08.addColorStop(0.2,"orange");
gradient08.addColorStop(0.4,"yellow");
gradient08.addColorStop(0.6,"green");
gradient08.addColorStop(0.8,"blue");
gradient08.addColorStop(1,"purple");
ctx08.fillStyle = gradient08;
ctx08.fillRect(0,0,100,100);
</script>
</li>
<li>
<canvas id="canvas09"></canvas>
<img id="img09" src="../images/photo3-超炮.jpg">
<script>
$(document).ready(function() {
var c09 = document.getElementById("canvas09");
var ctx09 = c09.getContext("2d");
var img09 = document.getElementById("img09");
var pat09 = ctx09.createPattern(img09,"repeat");
ctx09.rect(0,0,300,150);
ctx09.fillStyle = pat09;
ctx09.fill();
});
</script>
</li>
<li>
<canvas id="canvas10"></canvas>
<script>
var c10 = document.getElementById("canvas10");
var ctx10 = c10.getContext("2d");
ctx10.rect(0,0,50,50);
ctx10.fill(); //填充，stroke()在前，fill()在後，會導致前面stroke()繪製的矩形也被填充
ctx10.rect(60,0,50,50);
ctx10.stroke(); //繪製
ctx10.fillRect(120,0,50,50); //填充矩形
ctx10.strokeRect(200,0,50,50); //繪製矩形
</script>
</li>
</ol>
</body>
</html>