只有對基礎二維圖形的繪畫（drawing）、着色(coloring)、變換（transforming）有較強基礎，才能更加有效的利用Canvas；
下面，我就簡單了解一下，canvas是如何繪畫基本shape的（矩形、直線、圓弧、貝賽爾曲線）等；
先貼一個以下所有涉及到的實現運行的基本代碼段：
Base code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function() {};
Debugger.log = function(message) {
try {
console.log(message);
} catch (exception) {
return;
}
}
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function canvasApp() {
//是否支持CANVAS判斷
if(!canvasSupport()) {
return;
}
//取Canvas
var theCanvas = document.getElementById("canvasOne");
//獲取繪圖環境context
var context = theCanvas.getContext("2d");
//繪圖方法的實現
function drawScreen() {}
//繪圖方法調用執行
drawScreen();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px; border:1px solid #0000ff">
<canvas id="canvasOne" width="550" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
以下所有實例代碼，只要把上面的function drawScreen()替換掉即可！
Basic Rectangle Shape（矩形）
在Canvas中，畫矩形有三種方式：filling(), stroking(), or clearing
三種方式對應以下三種方法（參數都相同，分別是矩形的左上角的坐標[x,y]、矩形的寬度、矩形的高度）：
-
- fillRect(x,y,width,height)：填充矩形區域；
- strokeRect(x,y,width,height):畫一個矩形邊框；
- clearRect(x,y,width,height):清除指定的矩形區域、使該區域變得透明；
Example
function drawScreen() {
context.fillStyle = '#000000';//填充顏色
context.strokeStyle = '#00ff00';//輪廓顏色
context.lineWidth = 2;//線寬
context.fillRect(10, 10, 40, 40);//填充矩形
context.strokeRect(7, 7, 46, 46);//畫矩形輪廓
context.clearRect(20, 20, 20, 20);//清除矩形區域
}
Create Lines（直線）
利用path來創建線（line）
Path:用來畫出一系列的相連的圓弧或者線條，可以稱之為“軌跡”，使用它可以畫出任意復雜的形狀;
一個Canvas Context僅有一個current path ;
在調用context.save()時，current path並不做為當前的狀態（current state）存儲於stack中；
利用.beginPath()功能方法來啟動一個Path；
利用.closePath()功能方法來關閉一個Path；
Example:畫一條10px寬度的水平直線
function drawScreen() {
context.strokeStyle = "#000000";//線的顏色
context.lineWidth = 10;//線的寬度
context.beginPath();//啟動path
context.moveTo(20, 20);
context.lineTo(100, 20);
context.stroke();//繪畫
context.closePath();//關閉path
}
線的屬性：lineCap
直線lineCap屬性：線帽，也就是線兩端的樣式，只有繪制較寬的線的，它才有效；
有三個有效值：butt\round\square
"butt":默認值,指定了線段應該沒有線帽。
"round":線段應該帶有一個半圓形的線帽，半圓的直徑等於線段的寬度，並且線段在端點之外擴展了線段寬度的一半。
"square":線段應該帶有一個矩形線帽。這個值和 "butt" 一樣，但是線段擴展了自己的寬度的一半。
Example
function drawScreen() {
context.strokeStyle = "#000000";//線的顏色
context.lineWidth = 10;//線的寬度
context.lineCap="butt";//butt\round\square
context.beginPath();//啟動path
context.moveTo(20, 20);
context.lineTo(100, 20);
context.stroke();//繪畫
context.closePath();//關閉path
context.lineCap="round";//butt\round\square
context.beginPath();//啟動path
context.moveTo(20, 40);
context.lineTo(100, 40);
context.stroke();//繪畫
context.closePath();//關閉path
context.lineCap="square";//butt\round\square
context.beginPath();//啟動path
context.moveTo(20, 60);
context.lineTo(100, 60);
context.stroke();//繪畫
context.closePath();//關閉path
}
線的屬性：lineJoin
lineJoin屬性：表示兩條線段如何連接；
當一個路徑包含了線段或曲線相交的交點的時候，用lineJoin 屬性來說明如何繪制這些交點；
該屬性也有三個有效值：miter bevel round
"miter":默認值，兩條線段的外邊緣一直擴展到它們相交
"bevel":以一個斜邊進行連接
"round":以一個圓弧邊進行連接
Example
function drawScreen() {
context.strokeStyle = "#000000";
context.lineWidth = 10;
context.lineJoin = "miter";
context.beginPath();
context.moveTo(20, 20);
context.lineTo(100, 20);
context.lineTo(100, 40);
context.stroke();
context.closePath();
context.lineJoin = "bevel";
context.beginPath();
context.moveTo(20, 60);
context.lineTo(100, 60);
context.lineTo(100, 80);
context.stroke();
context.closePath();
context.lineJoin = "round";
context.beginPath();
context.moveTo(20, 100);
context.lineTo(100, 100);
context.lineTo(100, 120);
context.stroke();
context.closePath();
context.lineJoin = "miter";
context.beginPath();
context.moveTo(20, 140);
context.lineTo(100, 140);
context.lineTo(80, 180);
context.stroke();
context.closePath();
}
Arcs（圓弧）
一段圓弧可以是一個完整的圓也可以圓的一部分；
生成圓弧：context.arc()
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
參數依次代表圓心,半徑、起始角度、終止角度、圓弧的方向； 角度都是以弧度來表示；
anticlockwise為布爾類型 ;true為順時針、false為逆時針
Example
function drawScreen() {
context.strokeStyle = "black";
context.lineWidth = 5;
context.beginPath();
context.arc(100, 100, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
context.stroke();
context.closePath();
context.beginPath();
context.arc(100, 200, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 90, false);
context.stroke();
context.closePath();
context.beginPath();
context.arc(100, 300, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 90, true);
context.stroke();
context.closePath();
}
Bezier Curves（貝賽爾曲線）
Canvas支持二次 and 三次貝塞爾曲線的繪畫
此處的貝塞爾曲線是定義在二維空間里的，需要一個起始點、一個終止點，再加上一個或者兩個控制點來創建曲線；
控制點來決定所構造曲線的走向；
三次貝塞爾曲線需要兩個點；
二次貝塞爾曲線需要一個點即可；
主要通過以下兩個方法來繪畫：
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)
二次貝塞爾曲線:
function drawScreen()
{
context.strokeStyle = "black";
context.lineWidth = 5;
context.beginPath();
context.moveTo(0, 0);
context.quadraticCurveTo(500, 25, 0, 100);
context.stroke();
context.closePath();
}
曲線的起始點為（0，0），結束點為（0，100）
點（500，25）控制最終生成曲線的走向；
三次貝塞爾曲線：
function drawScreen()
{
context.strokeStyle = "black";
context.lineWidth = 5;
context.beginPath();
context.moveTo(0, 0);
context.bezierCurveTo(0, 125, 300, 175, 150, 300);
context.stroke();
context.closePath();
}
曲線的起點（0，0），結束點（150，300）
（0, 125）, （300, 175）這兩個為控制點；
大家可能自己運行一下代碼，看看效果，此處就不貼圖了。。
祝願所有人都得到幸福！！！