在慕課網(wǎng)上學(xué)習(xí)了 Canvas繪圖詳解 這門教程犯祠，寫了這篇canvas教程，想和大家分享學(xué)習(xí)的過(guò)程舀凛，希望和大家共同進(jìn)步．=_=
- 1.基礎(chǔ)必備
-
2.繪制線條
2.1.畫一條直線
2.2.畫多條直線
2.3.beginPath()
2.4.closePath()
2.5.填充樣式,矩形
2.6.線條屬性 - 3.實(shí)戰(zhàn)--繪制五角星
1.基礎(chǔ)必備
在HTML中創(chuàng)建Canvas畫布
<canvas id="canvas"></canvas>
在Js文件中獲取Canvas畫布，以及繪圖環(huán)境
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
2.繪制線條
2.1 畫一條直線
moveTo(), lineTo() 進(jìn)行狀態(tài)的設(shè)置
stroke(); 進(jìn)行實(shí)際的繪制
Canvas是基于狀態(tài)的設(shè)置围详，不是基于對(duì)象的設(shè)置(并沒有創(chuàng)建一個(gè)線條對(duì)象來(lái)設(shè)置線條的屬性硫痰，而是設(shè)置context的屬性)
完整代碼請(qǐng)戳Lesson1/demo1.html
//假設(shè)有個(gè)筆尖移動(dòng)到 (100,100)這個(gè)位置
context.moveTo(100, 100);
//創(chuàng)建到達(dá)位置 (400,100) 的一條線
context.lineTo(400, 100);
//進(jìn)行線條粗細(xì)設(shè)置
context.lineWidth = 5;
//進(jìn)行線條樣式設(shè)置
context.strokeStyle = "#058";
//繪制出通過(guò) moveTo() 和 lineTo() 方法定義的路徑衩婚。默認(rèn)顏色是黑色。
context.stroke();
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2.2 畫多條直線
- 使用lineTo()畫出首尾連接的圖形
完整代碼請(qǐng)戳Lesson1/demo2.html
//畫一個(gè)三角形
//假設(shè)有個(gè)筆尖移動(dòng)到 (100,100)這個(gè)位置
context.moveTo(100, 100);
context.lineTo(300, 300);
context.lineTo(100, 300);
context.lineTo(100, 100);
context.lineWidth = 5;
context.strokeStyle = "#058";
context.stroke();
- 使用moveTo()畫出組合圖形
完整代碼請(qǐng)戳Lesson1/demo3.html
//畫一個(gè)組合圖形
context.moveTo(100, 100);
context.lineTo(300, 300);
context.lineTo(100, 500);
context.moveTo(200, 100);
context.lineTo(400, 300);
context.lineTo(200, 500);
context.moveTo(300, 100);
context.lineTo(500, 300);
context.lineTo(300, 500);
那么問(wèn)題來(lái)了,如果想要繪制不同狀態(tài)的線條呢效斑？
2.3 beginPath()
開始一條路徑
完整代碼請(qǐng)戳Lesson1/demo4.html
//開始一條路徑
context.beginPath();
context.moveTo(100, 100);
context.lineTo(300, 300);
context.lineTo(100, 500);
context.lineWidth = 5;
context.strokeStyle = "#058";
context.stroke();
//開始一條路徑
context.beginPath();
context.moveTo(200, 100);
context.lineTo(400, 300);
context.lineTo(200, 500);
context.lineWidth = 5;
context.strokeStyle = "#ffcc99";
context.stroke();
//開始一條路徑
context.beginPath();
context.moveTo(300, 100);
context.lineTo(500, 300);
context.lineTo(300, 500);
context.lineWidth = 5;
context.strokeStyle = "#ff99cc";
context.stroke();
2.4 closePath()
創(chuàng)建從當(dāng)前點(diǎn)到開始點(diǎn)的路徑.
完整代碼請(qǐng)戳Lesson1/demo5.html
- 以demo2為例非春，比較用lineTo()和closePath()實(shí)現(xiàn)封閉的區(qū)別．
- (在lineWidth小的情況下可能看不出區(qū)別，但大的情況就有明顯的區(qū)別)
- 要繪制封閉的多邊形缓屠，使用成對(duì)的beginPath(), closePath()
//畫一個(gè)三角形
context.beginPath();
context.moveTo(100, 100);
context.lineTo(300, 300);
context.lineTo(100, 300);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "#058";
context.stroke();
2.5 填充樣式奇昙，矩形
- 填充樣式主要用到 fillStyle(),** fill()**方法
完整代碼請(qǐng)戳Lesson1/demo6.html
context.beginPath();
context.moveTo(100, 100);
context.lineTo(300, 300);
context.lineTo(100, 300);
context.closePath();
context.lineWidth = 5;
context.fillStyle = "#058";
context.fill();
- 繪制矩形可以用 rect()方法
- 或用 fillRect()，strokeRect()
完整代碼請(qǐng)戳Lesson1/demo7.html
rect() 方法規(guī)劃矩形的路徑
fillRect(), strokeRect() 不止規(guī)劃路徑敌完，還繪制出矩形
//使用rect()方法
function drawRect(cxt, x, y, width, height, borderWidth, borderColor, fillColor) {
cxt.beginPath();
cxt.rect(x, y, width, height);
cxt.closePath();
cxt.lineWidth = borderWidth;
cxt.strokeStyle = borderColor;
cxt.fillStyle = fillColor;
cxt.fill();
cxt.stroke();
}
//使用fillRect(), strokeRect()方法
function drawRect2(cxt, x, y, width, height, borderWidth, borderColor, fillColor) {
cxt.lineWidth = borderWidth;
cxt.strokeStyle = borderColor;
cxt.fillStyle = fillColor;
cxt.fillRect(x, y, width, height);
cxt.strokeRect(x, y, width, height);
}
2.6 線條屬性
- lineWidth 設(shè)置線條的寬度
- lineCap 設(shè)置線條末端線帽的樣式储耐。
lineCap屬性值:
buff 默認(rèn)。向線條的每個(gè)末端添加平直的邊緣滨溉。
round 向線條的每個(gè)末端添加圓形線帽什湘。
square 向線條的每個(gè)末端添加正方形線帽。
完整代碼請(qǐng)戳Lesson1/demo8.html
//buff 線條的末端平直的邊緣晦攒。
context.beginPath();
context.moveTo(100, 100);
context.lineTo(400, 100);
context.lineCap = "butt";
context.stroke();
//round 線條的末端圓形線帽
context.beginPath();
context.moveTo(100, 200);
context.lineTo(400, 200);
context.lineCap = "round";
context.stroke();
//square 線條的末端正方形線帽闽撤。
context.beginPath();
context.moveTo(100, 300);
context.lineTo(400, 300);
context.lineCap = "square";
context.stroke();
//參照線 baseLine
context.lineWidth = 2;
context.strokeStyle = "#555";
context.beginPath();
context.moveTo(100, 60);
context.lineTo(100, 350);
context.stroke();
context.beginPath();
context.moveTo(400, 60);
context.lineTo(400, 350);
context.stroke();
3. 實(shí)戰(zhàn)--繪制五角星
可以寫定五角星的10個(gè)坐標(biāo)點(diǎn)，但是這里為了復(fù)用五角星的繪制函數(shù)勤家，尋找各坐標(biāo)點(diǎn)之間的規(guī)律腹尖，動(dòng)態(tài)的生成五角星各個(gè)坐標(biāo)點(diǎn)．
我們將五角星外側(cè)的五個(gè)頂點(diǎn)看作在一個(gè)大圓中柳恐，內(nèi)側(cè)的五個(gè)頂點(diǎn)看做在一個(gè)同心的小圓中
大圓上的五個(gè)角平分一個(gè)圓伐脖，每個(gè)角的度數(shù)：360° / 5 = 72°
圖中表示的較小角：90° - 72° = 18°
圖中表示的較大角：72° / 2 + 18° = 54°
那么重點(diǎn)來(lái)了，這10個(gè)坐標(biāo)點(diǎn)該如何表示呢乐设？
先復(fù)習(xí)一下三角函數(shù) & 弧度制
正弦值——對(duì)邊/斜邊 即sin()
余弦值——鄰邊/斜邊 即cos()
角度轉(zhuǎn)弧度——弧度 = 角度＊π / 180
R 表示大圓半徑
r 表示小圓半徑
x 表示橫坐標(biāo)偏移量(即圓心橫坐標(biāo))
y 表示縱坐標(biāo)偏移量(即圓心縱坐標(biāo))
大圓和小圓上的頂點(diǎn)讼庇，后一個(gè)比前一個(gè)的角度大72度(逆時(shí)針)
完整代碼請(qǐng)戳Lesson1/demo9.html
//調(diào)用函數(shù)drawStar
drawStar(context, 200, 100, 250, 250);
==============================================
function drawStar(cxt, R, r, x, y) {
cxt.beginPath();
for (var i = 0; i < 5; i++) {
//繪制大圓上的五個(gè)坐標(biāo)點(diǎn)
cxt.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * R + x,
-Math.sin((18 + i * 72) / 180 * Math.PI) * R + y);
//繪制小圓上的五個(gè)坐標(biāo)點(diǎn)
cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * r + x,
-Math.sin((54 + i * 72) / 180 * Math.PI) * r + y);
}
cxt.closePath();
cxt.stroke();
}
===================== 華 麗 的 分 割 線 ==================
如果覺得我寫的還不錯(cuò)，請(qǐng)繼續(xù)關(guān)注下一節(jié)教程
下節(jié)預(yù)告：繪制一片星空近尚，圖形的變換蠕啄，填充樣式(漸變色，使用圖片,canvas等)
