一篙梢、什么是 canvas?
- HTML5 <canvas> 元素用于圖形的繪制栖博，通過腳本 (通常是JavaScript)來完成
- 可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像等
- Canvas 的默認大小為300像素×150像素（寬×高四瘫，像素的單位是px）
- 默認情況下 <canvas> 元素沒有邊框和內(nèi)容
- 可以使用HTML的高度和寬度屬性來自定義Canvas 的尺寸。
- 一個畫布在網(wǎng)頁中是一個矩形框欲逃，通過 <canvas> 元素來繪制.
- 標簽通常需要指定一個id屬性 (腳本中經(jīng)常引用)
- 可以在HTML頁面中使用多個 <canvas> 元素
二找蜜、瀏覽器支持情況
三、坐標系統(tǒng)
如圖所示稳析，canvas元素默認被網(wǎng)格所覆蓋洗做。通常來說網(wǎng)格中的一個單元相當于canvas元素中的一像素。柵格的起點為左上角彰居，坐標為（0,0）诚纸，所有元素的位置都相對于原點定位。
圖中藍色方形左上角的坐標為距離左邊（X軸）x像素陈惰，距離上邊（Y軸）y像素畦徘，坐標為（x,y）。
四抬闯、使用 JavaScript 來繪制圖像
（一）繪制矩形
canvas提供了三種方法繪制矩形：
fillRect(x, y, width, height)
????繪制一個填充的矩形
strokeRect(x, y, width, height)
????繪制一個矩形的邊框
clearRect(x, y, width, height)
????清除指定矩形區(qū)域井辆，讓清除部分完全透明。
x與y指定了在canvas畫布上所繪制的矩形的左上角（相對于原點）的坐標溶握。
width和height設置矩形的尺寸杯缺。
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas=document.getElementById("cava1");
var ctx=canvas.getContext("2d");
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
draw();
</script>
fillRect()函數(shù)繪制了一個邊長為100px的黑色正方形。clearRect()函數(shù)從正方形的中心開始擦除了一個60x60的正方形睡榆，接著strokeRect()在清除區(qū)域內(nèi)生成一個50x50的正方形邊框夺谁。
（二）繪制路徑
圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合肉微。一個路徑，甚至一個子路徑蜡塌，都是閉合的碉纳。使用路徑繪制圖形需要一些額外的步驟：
- 首先需要創(chuàng)建路徑起始點。
- 然后使用畫圖命令去畫出路徑馏艾。
- 之后把路徑封閉劳曹。
- 一旦路徑生成奴愉，就能通過描邊或填充路徑區(qū)域來渲染圖形。
要用到的函數(shù)：
beginPath()
????新建一條路徑铁孵，生成之后锭硼，圖形繪制命令被指向到路徑上生成路徑。
closePath()
????閉合路徑之后圖形繪制命令又重新指向到上下文中蜕劝。
stroke()
????通過線條來繪制圖形輪廓檀头。
fill()
????通過填充路徑的內(nèi)容區(qū)域生成實心的圖形。
生成路徑的步驟：
第一步叫做beginPath()岖沛。本質(zhì)上暑始，路徑是由很多子路徑構(gòu)成，這些子路徑都是在一個列表中婴削，所有的子路徑（線廊镜、弧形、等等）構(gòu)成圖形唉俗。而每次這個方法調(diào)用之后嗤朴，列表清空重置，然后我們就可以重新繪制新的圖形虫溜。
第二步就是調(diào)用函數(shù)指定繪制路徑雹姊。
第三，就是閉合路徑closePath(),不是必需的吼渡。這個方法會通過繪制一條從當前點到開始點的直線來閉合圖形容为。如果圖形是已經(jīng)閉合了的，即當前點為開始點寺酪，該函數(shù)什么也不做坎背。
注意：當你調(diào)用fill()函數(shù)時，所有沒有閉合的形狀都會自動閉合寄雀，所以你不需要調(diào)用closePath()函數(shù)得滤。但是調(diào)用stroke()時不會自動閉合。
在Canvas上畫線盒犹，我們將使用以下兩種方法：
moveTo(x,y) 定義線條開始坐標
lineTo(x,y) 定義線條結(jié)束坐標
示例：繪制一個三角形
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas = document.getElementById("cava1");
var ctx = canvas.getContext("2d");
//繪制三角形
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();
}
draw();
</script>
示例：圓弧
繪制圓弧或者圓懂更，使用arc()方法。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
以（x,y）為圓心急膀，以radius為半徑的圓痪谛（圓），從startAngle開始到endAngle結(jié)束卓嫂，按照anticlockwise給定的方向（默認為順時針）來生成慷暂。
該方法有六個參數(shù)：x,y為繪制圓弧所在圓上的圓心坐標。radius為半徑晨雳。startAngle以及endAngle參數(shù)用弧度定義了開始以及結(jié)束的弧度行瑞。這些都是以x軸為基準奸腺。參數(shù)anticlockwise為一個布爾值。為true時血久，是逆時針方向突照，否則順時針方向。
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas = document.getElementById("cava1");
var ctx = canvas.getContext("2d");
//圓形
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
}
draw();
</script>
其它文章請訪問：
