Canvas 基本繪製（下）
HTML5學堂：在前一篇文章《Canvas 基本繪製（上）》當中，我們為大家介紹了Canvas的基本知識——什麼是Canvas、如何使用Canvas進行影象的繪製、Canvas的一些基本方法。在今天的這篇文章當中，我們將為大家介紹Canvas的基本屬性、快速路徑的繪製方法等。
Canvas基本屬性
設定填充與描邊顏色
strokeStyle、fillStyle
線條樣式的設定
lineCap：設定線條末端線帽的樣式 （round、square）
註釋："round" 和 "square" 會使線條略微變長，兩端變長的長度各為寬度的一半。
lineWidth：不需要寫單位，以畫素計
字型設定
font：同 CSS font-family 屬性
textAlign：文字水平對齊方式。可取屬性值: start, end, left,right, center。預設值:start。
textBaseline：文字豎直對齊方式。可取屬性值： top, hanging（文字基線是懸掛基線）, middle,alphabetic（文字基線是普通的字母基線）, ideographic（文字基線是表意基線）, bottom 。預設值：alphabetic。
Canvas基本屬性操作例項
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5學堂</title> <link rel="stylesheet" href="../css/reset.css"> <script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script> <style> .wrap { width: 600px; height: 300px; margin: 0 auto; } .wrap canvas { border: 1px solid #999; } </style> </head> <body> <div class="wrap"> <canvas width="600" height="300"> 您的瀏覽器不支援canvas！ </canvas> </div> <script> var testCanvas = $("canvas")[0]; var context = testCanvas.getContext("2d"); context.beginPath(); // 線條寬度 context.lineWidth = "3"; // 填充樣式 context.strokeStyle = "red"; context.moveTo(50, 50); context.lineTo(50, 250); context.lineTo(150, 250); context.lineTo(150, 50); context.lineTo(50, 50); context.closePath(); // 閉合在實現繪製 該影象左上角出現不重合線性 context.stroke(); // 中間那條線 context.beginPath(); context.strokeStyle = "green"; context.moveTo(50, 150); context.lineTo(150, 150); context.stroke(); context.closePath(); // 右邊的矩形 context.beginPath(); context.strokeStyle = "blue"; context.fillStyle = "skyblue"; context.moveTo(300, 50); context.lineTo(300, 250); context.lineTo(550, 250); context.lineTo(550, 50); context.lineTo(300, 50); context.fill(); context.closePath(); var txt = "HTML5學堂"; context.textAlign = "start"; context. textBaseline = "middle"; context.font = "30px Microsoft YaHei"; context.fillText(txt, 224, 100); context.strokeText(txt, 224, 200); context.beginPath(); // 線條寬度 context.lineWidth = "10"; // 設定線條末端線帽的樣式 context.lineCap = "round"; // 作參考線 context.moveTo(224, 50); context.lineTo(224, 250); context.moveTo(160, 100); context.lineTo(290, 100); context.stroke(); </script> </body> </html>
Canvas快速繪製
矩形路徑的繪製
rect(x,y,w,h)：x、y為起始座標，w、h為矩形的寬、高
fillRect(x,y,w,h)：引數同上，與上面區別：上面只繪製、不填充，fillRect(x,y,w,h)填充
圓形路徑的繪製
arc(x,y,r,sa,ea,true/false)：x、y為圓心座標，r為半徑，sa、ea分別為起始角度和結束角度（以弧度計），最後一個引數為true時，逆時針畫圓，false則順時針畫圓；
貝塞爾曲線
quadraticCurveTo (kx,ky,ex,ey)
二次貝塞爾曲線開始點：moveTo(x, y);
kx、ky：控制點
ex、ey：結束點
bezierCurveTo (kx1,ky1,kx2,ky2,ex,ey) ：三次貝塞爾曲線，兩個控制點，一個終點
開始點：moveTo(x, y);
kx1、ky1：控制點
kx2、ky2：控制點
ex、ey：結束點
Canvas快速繪製例項
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂</title>
<link rel="stylesheet" href="../css/reset.css">
<script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
<style>
.draw {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="testCanvas" width="1000" height="500" class="draw"></canvas>
<script>
var testCanvas = document.getElementById("testCanvas");
// 獲取getContext()物件
var context = testCanvas.getContext("2d");
// 開始路徑
context.beginPath();
// 設定填充樣式
context.fillStyle = "yellow";
// 設定描邊樣式
context.strokeStyle = "green";
// 線條寬度
context.lineWidth = "5";
// 矩形路徑的繪製,但是不填充
context.rect(10, 10, 200, 200)
// 繪製路徑
context.stroke();
// 填充路徑
// context.fill();
// 關閉路徑
context.closePath();
context.beginPath();
context.fillStyle = "blue";
// 矩形路徑的填充
context.fillRect(220, 10, 200, 200);
context.closePath();
context.beginPath();
context.fillStyle = "blue";
// 圓形路徑的繪製
context.arc(500, 250, 200, 0, Math.PI / 2, false);
context.stroke();
context.fill();
context.closePath();
context.beginPath();
context.strokeStyle = "#fcf";
// 矩形路徑的填充
context.moveTo(500, 250);
context.quadraticCurveTo(20, 100, 100, 20)
context.stroke();
context.closePath();
context.beginPath();
context.strokeStyle = "#000";
// 矩形路徑的填充
context.moveTo(500, 250);
context.bezierCurveTo(500, 100, 40, 80, 500, 200)
context.stroke();
context.closePath();
</script>
</body>
</html>Canvas繪製思路
開啟路徑——>設定屬性——>進行路徑的變化——>關閉路徑——>描邊或填充
Canvas效果補充：棋盤繪製
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂</title>
<link rel="stylesheet" href="../css/reset.css">
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="wrap">
<canvas width="1200" height="600">
您的瀏覽器不支援canvas！
</canvas>
</div>
<script>
var testCanvas = $("canvas")[0];
var context = testCanvas.getContext("2d");
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = "pink";
for (var i = 0; i < 26; i++) {
context.moveTo(0, i * 20);
context.lineTo(500, i * 20);
};
context.stroke();
context.beginPath();
context.strokeStyle = "skyblue";
for (var j = 0; j < 26; j++) {
context.moveTo(j * 20, 0);
context.lineTo(j * 20, 500);
};
context.font = "60px Microsoft YaHei";
context.strokeText("HTML5學堂-棋盤", 550, 250);
context.strokeText("夢幻雪冰、獨行冰海", 550, 360);
context.stroke();
context.closePath();
</script>
</body>
</html>效果圖如下：
