在第一天學習了HTML5的一些非常重要的基本知識，今天將進行更深層學習
10年積累的成都網(wǎng)站建設、成都做網(wǎng)站經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先做網(wǎng)站后付款的網(wǎng)站建設流程，更有柯橋免費網(wǎng)站建設讓你可以放心的選擇與我們合作。
首先來回顧第一天學習的內(nèi)容，第一天學習了新標簽，新控件，驗證功能，應用緩存等內(nèi)容。
第2天將學習如何使用Canvas 和使用SVG 實現(xiàn)功能
Lab1—— 使用Canvas
Canvas 是指定了長度和寬度的矩形畫布，我們將使用新的HTML5 JavaScript，可使用HTML5 JS API 來畫出各種圖形。
初始化
1. 創(chuàng)建HTML頁面
2. 在Body標簽內(nèi)添加Canvas
3. 在
標簽內(nèi)添加Script 標簽
4. 在Script 標簽內(nèi)創(chuàng)建JavaScript 函數(shù) Draw ，Draw函數(shù)能夠訪問Canvas 對象
function Draw()
{
var ctx = document.getElementById('MyCanvas').getContext("2d");
//Canvas Code Comes Here}
Lab 1.1 使用 Path
Path 由0個或多個Sub Path組成，每個Sub path 是是由一個或多個終點組成，每個終點是通過直線或曲線連接的。
Lab1.1.1 使用Single 創(chuàng)建Path;
腳本片段：
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(75, 50);
ctx.lineTo(75, 100);
ctx.stroke();
ctx.strokeStyle = "red";
ctx.lineTo(25, 100);
ctx.stroke();
輸出：
上述示例中Path 是由2個子路徑組成的。
BeginPath—— 創(chuàng)建新路徑
strokeStyle 用于設置樣式
每次調(diào)用Stroke 方法，所有的子路徑都會使用當前的Style 重新畫。
Lab 1.1.2 使用Multiple Begin Path創(chuàng)建Path
核心代碼：
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(75, 50);
ctx.lineTo(75, 100);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(75, 100);
ctx.strokeStyle = "red";
ctx.lineTo(25, 100);
ctx.stroke();
輸出：
Lab1.1.3 理解ClosePath
核心代碼：
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(75, 50);
ctx.lineTo(75, 100);
ctx.lineTo(25, 100);
ctx.closePath();
ctx.stroke();
輸出：
Lab1.1.4 理解Fill
核心代碼
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(75, 100);
ctx.lineTo(25, 100);
ctx.fillStyle = "red";
ctx.fill();
輸出：
Lab1.1.5 畫曲線
quadraticCurveTo 函數(shù)定義了四個參數(shù)，前兩個點是控制點，用于曲率計算，后兩個參數(shù)是終點的曲度核心代碼：
ctx.beginPath();
ctx.moveTo(175, 50)
ctx.quadraticCurveTo(60, 360, 175, 300);
ctx.stroke()
輸出：
.jpg)
Lab 1.2 使用Rectangle
Lab1.2.1 畫矩形
ctx.fillStyle="red";
ctx.fillRect(75, 75, 150, 150);
ctx.strokeStyle = "black";
ctx.lineWidth = 5;
ctx.strokeRect(175,175,150,150);
輸出:
Lab1.2.2 清除矩形
代碼：
ctx.fillStyle="red";
ctx.fillRect(75, 75, 250, 250);
ctx.clearRect(125, 125, 100, 100);
輸出
Lab 1.3 使用漸變色
Lab1.3.1 使用線性漸變色
var grd = ctx.createLinearGradient(75, 75, 225, 75);
grd.addColorStop(0, "black");
grd.addColorStop(0.2, "magenta");
grd.addColorStop(0.4, "blue");
grd.addColorStop(0.6, "green");
grd.addColorStop(0.8, "yellow");
grd.addColorStop(1, "red");
ctx.fillStyle = grd
ctx.fillRect(75, 75, 150, 150);
輸出
注意：
reateLinearGradient 包含四個參數(shù)x1,y1,x2,y2
1. 如果x1=x2 并且y1!=y2,漸變色改變的方向則是水平。
2. 如果y1=y2 并且x1!=x2, 漸變色方向是垂直的。
3. 如果x1!=x2且y1!=y2,漸變色方向則為對角。
AddColorStop 函數(shù)包含兩個參數(shù)。
1. 0到1 之間的數(shù)字,用來表示漸變色起始和終點的位置。
2. Color;
Lab1.3.2 使用圓形漸變
代碼：
var grd = ctx.createRadialGradient(150, 150, 5, 150, 150,85);
grd.addColorStop(0, "orange");
grd.addColorStop(0.2, "magenta");
grd.addColorStop(0.4, "blue");
grd.addColorStop(0.6, "green");
grd.addColorStop(0.8, "yellow");
grd.addColorStop(1, "red");
ctx.fillStyle = grd
ctx.fillRect(75, 75, 150, 150);
輸出
CreateRadialGradiant包含6個參數(shù)，x1,y1,r1,x2,y2,r2
1, x1,y1,r1代表開始圓形的圓心和半徑
2. x2,y2,r2 表示結(jié)束圓的圓心和半徑
Lab 1.4 使用圓形
核心代碼：
ctx.beginPath();
ctx.fillStyle="yellow";
ctx.strokeStyle="green";
ctx.lineWidth = "8";
ctx.arc(100, 175, 85, 0, 2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "green";
ctx.strokeStyle = "yellow";
ctx.lineWidth = "8";
ctx.arc(285, 175, 85, 0, 1 * Math.PI);
ctx.fill();
ctx.stroke();
輸出：
DrawArc 函數(shù)包含5個參數(shù)，x,y,r,sa,ea
x 和y 表示圓心
r表示半徑
sa 和ea 是開始邊緣和結(jié)束邊緣
Lab1.5 使用Text
代碼：
ctx.beginPath();
ctx.font = "30px Segoe UI";
ctx.fillText("www.StepByStepSchools.Net",0, 150);輸出：
fillText/stokeText具有三個參數(shù)
1. 實際輸出的文本
2. x,y 是可選值。
Lab 1.6 Scale
ctx.strokeRect(75, 75, 75, 75);
ctx.scale(2,2);
ctx.strokeRect(75, 75, 75, 75);
輸出：
Lab 1.7 旋轉(zhuǎn)
代碼片段：
ctx.rotate(0.2);
ctx.strokeRect(75, 75, 75, 75);
輸出：
Lab 1.8 轉(zhuǎn)換
代碼：
ctx.strokeRect(0, 0, 150, 150);
ctx.translate(150, 150);
ctx.strokeRect(0, 0, 150, 150);
輸出：
Lab 1.9 保存和重置Canvas 的狀態(tài)
ctx.fillStyle="red";
ctx.fillRect(75, 75, 150, 150);
ctx.fillStyle = "blue";
ctx.fillRect(90, 90, 50, 50);
ctx.save();
ctx.fillStyle = "yellow";
ctx.fillRect(90, 160, 50, 50);
ctx.save();
ctx.fillStyle = "green";
ctx.restore();
ctx.restore();
ctx.fillRect(160, 160, 50, 50);
輸出
Lab 1.10 使用圖像
vari = new Image();
i.src = "Desert.jpg";
i.onload = function () { //Draw Squqrectx.strokeStyle = "green";
ctx.lineWidth = 5;
ctx.drawImage(i, 0, 0);
ctx.strokeRect(60, 120, 70, 80); //draw Textctx.strokeStyle = "yellow";
ctx.font = "30px Segoe UI";
ctx.lineWidth = 1;
ctx.strokeText("My Home", 80, 40); //Draw Arrowctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.moveTo(110, 110);
ctx.lineTo(125, 40);
ctx.moveTo(110, 110);
ctx.lineTo(100, 90);
ctx.moveTo(110, 110);
ctx.lineTo(126, 95);
ctx.stroke();
};
輸出：
Lab1.11 使用Canvas 生成動畫
一旦在Canvas 填充好東西就無法修改，可采用以下方法來修改：
1. 使用ClearRect 函數(shù)刪除存在的元素
2. 添加新屬性重畫元素
當以上策略與傳統(tǒng)的JS 函數(shù)結(jié)合，可使用TimeOut 或SetInterval 方法來實現(xiàn)，可產(chǎn)生動畫。
代碼：
var interval;
var x = 0, y = 0;
functiondrawInAnimation()
{
varctx = document.getElementById('MyCanvas').getContext("2d");
ctx.beginPath();
ctx.moveTo(x, y);
ctx.clearRect(x , y, 50, 50);if (x >document.getElementById('MyCanvas').width) {
x = 0;
y += 50;if (y + 50 >document.getElementById('MyCanvas').height)
{
x = 0; y = 0;
}
}else {
x += 15;
}
ctx.fillStyle = getRndColor();
ctx.fillRect(x, y,50,50);
}
functiongetRndColor() {
var r = 255 * Math.random() | 0,
g = 255 * Math.random() | 0,
b = 255 * Math.random() | 0; return 'rgb(' + r + ',' + g + ',' + b + ')';
}
interval = setInterval("drawInAnimation()", 15);
輸出：
Lab 2 使用SVG 工作
如Canvas,SVG 支持在矩形中畫圖像，接下來將了解到Canvas 與SVG 的區(qū)別。
初始化
1. 新建HTML頁面
2. 在body 標簽內(nèi)新建Canvas :
Lab2.1 畫出多種形狀
代碼：
A coder can be creative
輸出：
Lab 2.2SVG 動畫
SVG 使得動畫制作變得簡單：
初始化設置：
....
眨眼動畫：
張嘴動畫：
盒子動畫效果：
A coder can be creative
輸出
SVG VS Canvas
SVG 和Canvas 區(qū)別：
Canvas 是基于Pixel 而SVG 是基于Vector
簡單來說SVG圖片是與屏幕分辨率無關(guān)的，而Canvas 不是。
SVG使用語義標記可繪出圖形，然而Canvas就只能使用JS腳本代碼。
http://weahome.cn/article/giiscj.html
重慶分公司
重慶分公司
