在慕課網(wǎng)上學(xué)習(xí)了 Canvas繪圖詳解 這門(mén)教程宝穗，寫(xiě)了這篇canvas教程次哈，想和大家分享學(xué)習(xí)的過(guò)程情妖，希望和大家共同進(jìn)步．=_=
這么久才更教程的第二篇睬关，我該打(；′⌒`)
- 1.效果展示
-
2.圖形的變換和保存
2.1.位移(translate)
2.2.旋轉(zhuǎn)(rotate)
2.3.縮放(scale) -
3.填充樣式
3.1.漸變
3.2.使用圖片填充
3.3.使用canvas填充
1. 效果展示
完整代碼請(qǐng)戳Lesson2/demo9.html
效果展示.png
2. 圖像的變換和保存
2.1 位移 translate(x,y)
完整代碼請(qǐng)戳Lesson2/demo1.html
//第一個(gè)正方形從(0,0)點(diǎn)開(kāi)始毡证，x軸平移100像素电爹，y軸平移100像素
context.fillStyle = "#559ABB";
context.translate(100,100);
context.fillRect(0, 0, 100, 100);
//第二個(gè)正方形從(100,100)點(diǎn)開(kāi)始，x軸平移100像素料睛，y軸平移100像素
context.fillStyle = "#F8D184";
context.translate(100,100);
context.fillRect(0, 0, 100, 100);
可以看出兩個(gè)translate的效果是疊加的丐箩，為了使用圖形變換時(shí)效果不影響可保存canvas的狀態(tài)。
圖片.png
Canvas狀態(tài)的保存和恢復(fù)
save(): 保存當(dāng)前圖形的狀態(tài)
restore(): 返回save的canvas的所有狀態(tài)
完整代碼請(qǐng)戳Lesson2/demo2.html
//保存第一個(gè)正方形的狀態(tài)
//從(0,0)點(diǎn)開(kāi)始恤煞，x軸平移100像素屎勘，y軸平移100像素
context.save();
context.fillStyle = "#559ABB";
context.translate(100,100);
context.fillRect(0, 0, 100, 100);
context.restore();
//保存第二個(gè)正方形的狀態(tài)
//從(0,0)點(diǎn)開(kāi)始，x軸平移100像素阱州，y軸平移100像素
context.save();
context.fillStyle = "#F8D184";
context.translate(100,100);
context.fillRect(0, 0, 100, 100);
context.restore();
均以(0,0)為起點(diǎn)x,y軸平移100像素，藍(lán)色的正方形被黃色的正方形蓋住了
圖片.png
2.2 旋轉(zhuǎn)rotate(deg)
使用translate,rotate的星空?qǐng)D
完整代碼請(qǐng)戳Lesson2/demo3.html
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;
context.fillStyle = "#283D52";
context.fillRect(0, 0, canvas.width, canvas.height);
//假設(shè)畫(huà)布中有50個(gè)星星
for (var i = 0; i <= 50; i++) {
//x軸偏移量
var x = Math.random() * canvas.width;
//y軸偏移量
var y = Math.random() * canvas.height;
//任意角度
var a = Math.random() * 360;
draw(context, x, y, a);
}
};
//繪制星星
function draw(cxt, x, y, rot) {
//保存canvas的狀態(tài)
cxt.save();
//x,y軸的偏移量
cxt.translate(x, y);
//旋轉(zhuǎn)的角度
cxt.rotate(rot / 180 * Math.PI);
//繪制星星的路徑
starPath(cxt);
cxt.fillStyle = "#F8D184";
cxt.strokeStyle = "#FAD085";
cxt.lineWidth = 2;
cxt.lineJoin = "round";
cxt.fill();
cxt.stroke();
cxt.restore();
}
//繪制一個(gè)星星的路徑,這里繪制星星時(shí)設(shè)定大圓半徑為10法梯，小圓半徑為大圓半徑的一半
function starPath(cxt) {
cxt.beginPath();
for (var i = 0; i < 5; i++) {
cxt.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * 10,
-Math.sin((18 + i * 72) / 180 * Math.PI) * 10);
cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 0.5 * 10,
-Math.sin((54 + i * 72) / 180 * Math.PI) * 0.5 * 10);
}
cxt.closePath();
}
如何繪制星星 可參考 Canvas從入門(mén)到放棄 (一)
只有平移和旋轉(zhuǎn)苔货，所有星星都是一樣大
圖片.png
2.3 縮放scale(sx,sy)
完整代碼請(qǐng)戳Lesson2/demo4.html
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var context = canvas.getContext("2d");
context.fillStyle = "#283D52";
context.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < 80; i++) {
//大圓半徑在[5-15)之間
var R = Math.random() * 10 + 5;
//x軸偏移量
var x = Math.random() * canvas.width;
//y軸偏移量
var y =Math.random() * canvas.height;
//旋轉(zhuǎn)角度
var a = Math.random() * 360;
drawStar(context, x, y, R, a);
}
};
function drawStar(cxt, x, y, R, rot) {
cxt.save();
//x,y軸的偏移量
cxt.translate(x, y);
//旋轉(zhuǎn)的角度
cxt.rotate(rot / 180 * Math.PI);
//縮放的大小
cxt.scale(R, R);
drawPath(cxt);
cxt.fillStyle = "#F8D184";
cxt.lineJoin = "round";
cxt.fill();
cxt.restore();
}
//繪制一個(gè)星星的路徑(繪制的星星看不見(jiàn)，因?yàn)檫@里沒(méi)有設(shè)置半徑立哑，在上面用scale控制半徑)
function drawPath(cxt) {
cxt.beginPath();
for (var i = 0; i < 5; i++) {
//繪制大圓上的五個(gè)坐標(biāo)點(diǎn)
cxt.lineTo(Math.cos((18 + i * 72 ) / 180 * Math.PI),
-Math.sin((18 + i * 72) / 180 * Math.PI));
//繪制小圓上的五個(gè)坐標(biāo)點(diǎn)
cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 0.5,
-Math.sin((54 + i * 72) / 180 * Math.PI) *0.5);
}
cxt.closePath();
}
圖片.png
3. 填充樣式
3.1 漸變
線(xiàn)性漸變
step1: 設(shè)置漸變線(xiàn)
//參數(shù)是兩個(gè)坐標(biāo)夜惭，構(gòu)成了一條線(xiàn)段
var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend)
step 2:在漸變線(xiàn)上設(shè)置關(guān)鍵色
//stop決定關(guān)鍵色的位置，color決定關(guān)鍵色的顏色
linearGrad.addColorStop(stop,color);
繪制一片線(xiàn)性漸變的星空
完整代碼請(qǐng)戳Lesson2/demo5.html
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var context = canvas.getContext("2d");
var linearGrad = context.createLinearGradient(0, 0, 0, 400);
linearGrad.addColorStop(0, '#1C213B');
linearGrad.addColorStop(0.25, '#2A2D49');
linearGrad.addColorStop(0.5, '#4D4D5F');
linearGrad.addColorStop(0.75, '#916580');
linearGrad.addColorStop(1.0, '#C3919A');
context.fillStyle = linearGrad;
context.fillRect(0, 0, canvas.width, canvas.height);
線(xiàn)性漸變.png
徑向漸變
step 1: 設(shè)置漸變線(xiàn)
//參數(shù)為第一個(gè)圓的圓心铛绰，半徑诈茧，第二個(gè)圓的圓心，半徑
var linearGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
step 2: 在漸變線(xiàn)上設(shè)置漸變色
//stop決定關(guān)鍵色的位置捂掰，color決定關(guān)鍵色的顏色
linearGrad.addColorStop(stop,color);
繪制一片徑向漸變的星空
完整代碼請(qǐng)戳Lesson2/demo6.html
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var context = canvas.getContext("2d");
var linearGrad = context.createRadialGradient(canvas.width/2, canvas.height, 0,
canvas.width/2,canvas.height,canvas.height);
linearGrad.addColorStop(0, '#CC99A1');
linearGrad.addColorStop(1.0, '#213244');
context.fillStyle = linearGrad;
context.fillRect(0, 0, canvas.width, canvas.height);
徑向漸變.png
3.2 使用圖片填充畫(huà)布
完整代碼請(qǐng)戳Lesson2/demo7.html
//第一個(gè)參數(shù)敢会，表示填充一個(gè)圖片，第二個(gè)參數(shù)填充方式
createPattern(img,repeat-style)
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext("2d");
//創(chuàng)建一個(gè)圖片對(duì)象
var backGroundImage = new Image();
backGroundImage.src = "lemon.png";
backGroundImage.onload = function () {
var pattern = context.createPattern(backGroundImage, "repeat");
context.fillStyle = pattern;
context.fillRect(0, 0, 300, 300);
}
}
圖片填充.png
3.3 使用另一個(gè)canvas填充畫(huà)布
完整代碼請(qǐng)戳Lesson2/demo8.html
//第一個(gè)參數(shù)这嚣，表示填充另外一個(gè)畫(huà)布鸥昏，第二個(gè)參數(shù)填充方式
createPattern(canvas,repeat-style)
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var context = canvas.getContext("2d");
var backCanvas = creatBackCanvas();
var pattern = context.createPattern(backCanvas, "repeat");
context.fillStyle = pattern;
context.fillRect(0, 0, 400, 400);
};
//創(chuàng)建一個(gè)背景畫(huà)布，畫(huà)布中繪制一顆星星
function creatBackCanvas() {
var backCanvas = document.createElement("canvas");
backCanvas.width = 100;
backCanvas.height = 100;
var backCanvasContext = backCanvas.getContext("2d");
drawStar(backCanvasContext, 50, 50, 20, 0);
return backCanvas;
}
//繪制星星
function drawStar(cxt, x, y, R, a) {
cxt.beginPath();
for (let i = 0; i < 5; i++) {
cxt.lineTo(Math.cos((18 + i * 72 - a) / 180 * Math.PI) * R + x,
-Math.sin((18 + i * 72 - a) / 180 * Math.PI) * R + y);
cxt.lineTo(Math.cos((54 + i * 72 - a) / 180 * Math.PI) * R/2 + x,
-Math.sin((54 + i * 72 - a) / 180 * Math.PI) * R/2 + y);
}
cxt.closePath();
cxt.fillStyle = "#F8D184";
cxt.strokeStyle = "#FAD085";
cxt.lineWidth = 3;
cxt.lineJoin = "round";
cxt.fill();
cxt.stroke();
}
使用canvas填充.png
總結(jié)：填充樣式 fillStyle
fillStyle = color （顏色）
gradient（漸變）
image （圖片）
canvas （畫(huà)布）
下節(jié)預(yù)告：曲線(xiàn)的繪制姐帚，文字的渲染
