HTML5的SVG和Canvas的使用

本文將學習如何使用Canvas 和使用SVG 實現功能

 

Lab1—— 使用Canvas

Canvas 是指定了長度和寬度的矩形畫布，我們將使用新的HTML5 JavaScript，可使用HTML5 JS API 來畫出各種圖形。

初始化

1. 建立HTML頁面

2. 在Body標籤內新增Canvas

3. 在

標籤內新增Script 標籤

None

4. 在Script 標籤內建立JavaScript 函式 Draw ，Draw函式能夠訪問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 建立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—— 建立新路徑

strokeStyle 用於設定樣式

每次呼叫Stroke 方法，所有的子路徑都會使用當前的Style 重新畫。

Lab 1.1.2 使用Multiple Begin Path建立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 函式定義了四個引數，前兩個點是控制點，用於曲率計算，後兩個引數是終點的曲度核心程式碼：

ctx.beginPath();
ctx.moveTo(175, 50)
ctx.quadraticCurveTo(60, 360, 175, 300);
ctx.stroke()

輸出：

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 包含四個引數x1,y1,x2,y2

1. 如果x1=x2 並且y1!=y2,漸變色改變的方向則是水平。

2. 如果y1=y2 並且x1!=x2, 漸變色方向是垂直的。

3. 如果x1!=x2且y1!=y2,漸變色方向則為對角。

AddColorStop 函式包含兩個引數。

1. 0到1 之間的數字,用來表示漸變色起始和終點的位置。

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個引數，x1,y1,r1,x2,y2,r2

1, x1,y1,r1代表開始圓形的圓心和半徑

2. x2,y2,r2 表示結束圓的圓心和半徑

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 函式包含5個引數，x,y,r,sa,ea

x 和y 表示圓心

r表示半徑

sa 和ea 是開始邊緣和結束邊緣

Lab1.5 使用Text

程式碼：

tx.beginPath();
ctx.font = "30px Segoe UI";
ctx.fillText("",0, 150);

輸出：

fillText/stokeText具有三個引數

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 旋轉

程式碼片段：

ctx.rotate(0.2);
ctx.strokeRect(75, 75, 75, 75);

輸出：

Lab 1.8 轉換

程式碼：

ctx.strokeRect(0, 0, 150, 150);
ctx.translate(150, 150);
ctx.strokeRect(0, 0, 150, 150);

輸出：

Lab 1.9 儲存和重置Canvas 的狀態

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 Text
        ctx.strokeStyle = "yellow";
        ctx.font = "30px Segoe UI";
        ctx.lineWidth = 1;
        ctx.strokeText("My Home", 80, 40);
        //Draw Arrow
         ctx.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 函式刪除存在的元素

2. 新增新屬性重畫元素

當以上策略與傳rval;

var x統的JS 函式結合，可使用TimeOut 或SetInterval 方法來實現，可產生動畫。

程式碼：

 = 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 的區別。

初始化

1. 新建HTML頁面

2. 在body 標籤內新建Canvas :

 >

Lab2.1 畫出多種形狀

程式碼：

輸出：

Lab 2.2SVG 動畫

SVG 使得動畫製作變得簡單：

初始化設定：

眨眼動畫：

<!--Left Eye--&gt
        
        <!--Left Eye ball--&gt
        
            
            
            
            
            
            
            
            
            
            
            
 

<!--Right Eye--&gt
        
        <!--Right Eye ball--&gt
        
            
            
            
            
            
            
            
            
            
            
 

張嘴動畫：

盒子動畫效果：

<!--Box Anmation--&gt
        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
        
        A coder can be creative

輸出

SVG VS Canvas

SVG 和Canvas 區別：

• Vector VS Pixel

Canvas 是基於Pixel 而SVG 是基於Vector

 

 

簡單來說SVG圖片是與螢幕解析度無關的，而Canvas 不是。

• XML VS JavaScript

SVG使用語義標記可繪出圖形，然而Canvas就只能使用JS指令碼程式碼。

• 支援事件處理

Canvas 不支援事件處理，SVG 支援。

HTML

JavaScript

輸出：

Canvas 最後可輸出為影像，可使用瀏覽器預設的選項將影像儲存。而SVG 不支援。