三天學會HTML5——SVG和Canvas的使用

77rou發表於2016-02-04

HTMLSVGCanvas

在第一天學習了HTML5的一些非常重要的基本知識，今天將進行更深層學習

首先來回顧第一天學習的內容，第一天學習了新標籤，新控制元件，驗證功能，應用快取等內容。

第2天將學習如何使用Canvas 和使用SVG 實現功能

Lab1—— 使用Canvas

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

初始化

1. 建立HTML頁面

<html> <head></head> <body></body> </html>

2. 在Body標籤內新增Canvas

<canvas id="MyCanvas" width="500px" height="500px" style="border:1px solid black;">

</canvas>

3. 在<head>標籤內新增Script 標籤

<head>

<script type="text/javascript">

</script>

</head>

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

程式碼：

ctx.beginPath();

ctx.font = "30px Segoe UI";

ctx.fillText("www.StepByStepSchools.Net",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 Squqre ctx.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. 新增新屬性重畫元素

當以上策略與傳統的JS 函式結合，可使用TimeOut 或SetInterval 方法來實現，可產生動畫。

程式碼：

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

初始化

1. 新建HTML頁面

<html>

<head></head>

<body></body>

</html>

2. 在body 標籤內新建Canvas :

<SVG id="MySVG" width="500px" height="500px" style="border:1px solid black;">

</SVG >

Lab2.1 畫出多種形狀

程式碼：

<svg width="205" height="200">


    <!--surrounding border-->

    <rect x="0" y="0" width="205" height="200" style="fill: rgb(199, 240, 185);"> </rect>

    <!--surrounding border-->



    <!--Hat Start-->

    <rect x="78" y="10" width="44" height="70" style="fill: black; stroke: black; "></rect>

    <ellipse cx="100" cy="20" rx="67" ry="12" stroke="white" stroke-width="0.5" fill="black"></ellipse>          

    <!--Hat End-->



    <!--Left ear-->

    <ellipse cx="55" cy="70" rx="25" ry="25" stroke="black" stroke-width="2" fill="gray"></ellipse>


    <!--Right ear-->

    <ellipse cx="145" cy="70" rx="25" ry="25" stroke="black" stroke-width="2" fill="gray"></ellipse>


    <!--Face-->

    <circle cx="100" cy="105" r="50" stroke="black" stroke-width="2" fill="rgb(230, 231, 194)" />


    <!--Left Eye-->

    <ellipse cx="75" cy="95" rx="10" ry="20" style="fill:white;stroke:black;stroke-width:1" />

    <!--Left Eye ball-->

    <ellipse cx="80" cy="95" rx="5" ry="12" style="fill:black;stroke:black;stroke-width:1" />


    <!--Right Eye-->

    <ellipse cx="125" cy="95" rx="10" ry="20" style="fill:white;stroke:black;stroke-width:1" />

    <!--Right Eye ball-->

    <ellipse cx="120" cy="95" rx="5" ry="12" style="fill:black;stroke:black;stroke-width:1" />


    <!--Mouth start-->

    <clipPath id="cut-off-bottom">

        <rect x="70" y="135" width="60" height="30" />

    </clipPath>

    <ellipse cx="100" cy="125" rx="30" ry="20" clip-path="url(#cut-off-bottom)" style="fill:rgb(230, 231, 194);stroke:black;stroke-width:2" />

    <!--Mouth End-->


    <!--Nose-->

    <polygon points="100,115 85,125 115,125" style="fill: brown;

            stroke-width: 1" />


    <!--Divider-->

    <line x1="0" y1="165" x2="205" y2="165" style="stroke:brown;

stroke-width:2" />

    <text x="25" y="185" font-family="Comic Sans MS'" fill="Blue" >A coder can be creative</text>

</svg>

輸出：

Lab 2.2SVG 動畫

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

初始化設定：

<svg width="205" height="220">

        <rect x="0" y="0" width="205" height="220" style="fill: rgb(199, 240, 185);">
        </rect>

....
</svg>

眨眼動畫：

<!--Left Eye-->

        <ellipse cx="75" cy="95" rx="15" ry="15" style="fill:white;stroke:black;stroke-width:1" />

        <!--Left Eye ball-->

        <ellipse cx="75" cy="95" rx="5" ry="5" style="fill:black;stroke:black;stroke-width:1">

            <animate attributeName="cx" attributeType="XML" from="75" to="85" id="Left1" repeatCount="1" begin="0s;Left5.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML" to="85" begin="Left1.end" />


            <animateTransform attributeName="transform" type="rotate" id="Left2" from="0 75 95" to="360 75 95" begin="Left1.end" dur="1s" repeatCount="3">

            </animateTransform>

            <animate attributeName="cx" attributeType="XML" from="85" to="65" id="Left3" begin="Left2.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML" to="65" begin="Left3.end" />


            <animateTransform attributeName="transform" type="rotate" id="Left4" from="360 75 95" to="0 75 95" begin="Left3.end" dur="1s" repeatCount="3">

            </animateTransform>

            <animate attributeName="cx" attributeType="XML" from="65" to="75" id="Left5" begin="Left4.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML" to="75" begin="Left4.end" >

            </set>

        </ellipse>

<!--Right Eye-->

        <ellipse cx="125" cy="95" rx="15" ry="15" style="fill:white;stroke:black;stroke-width:1" />

        <!--Right Eye ball-->

        <ellipse cx="125" cy="95" rx="5" ry="5" style="fill:black;stroke:black;stroke-width:1">

            <animate attributeName="cx" attributeType="XML" from="125" to="135" id="Right1" repeatCount="1" begin="0s;Right5.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML" to="135" begin="Right1.end" />


            <animateTransform attributeName="transform" type="rotate" id="Right2" from="0 125 95" to="360 125 95" begin="Right1.end" dur="1s" repeatCount="3">

            </animateTransform>

            <animate attributeName="cx" attributeType="XML" from="135" to="115" id="Right3" begin="Right2.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML" to="115" begin="Right3.end" />


            <animateTransform attributeName="transform" type="rotate" id="Right4" from="360 125 95" to="0 125 95" begin="Right3.end" dur="1s" repeatCount="3">

            </animateTransform>

            <animate attributeName="cx" attributeType="XML" from="115" to="125" id="Right5" begin="Right4.end" dur="0.5s" />

            <set attributeName="cx" attributeType="XML" to="125" begin="Right4.end" />

        </ellipse>

張嘴動畫：

<clipPath id="cut-off-bottom">

    <rect x="70" y="135" width="60" height="11">


        <animate attributeName="y" attributeType="XML" from="135" to="125" id="MouthClipAnimation1" begin="0;MouthClipAnimation3.end+3" dur="1s" />

        <animate attributeName="height" attributeType="XML" from="11" to="22" id="MouthClipAnimation2" begin="0;MouthClipAnimation4.end+3" dur="1s" />


        <set attributeName="y" attributeType="XML" to="125" begin="MouthClipAnimation1.end-0.1" />

        <set attributeName="height" attributeType="XML" to="22" begin="MouthClipAnimation2.end-0.1" />


        <animate attributeName="y" attributeType="XML" from="125" to="135" id="MouthClipAnimation3" begin="MouthClipAnimation1.end+3" dur="1s" />

        <animate attributeName="height" attributeType="XML" from="22" to="11" id="MouthClipAnimation4" begin="MouthClipAnimation2.end+3" dur="1s" />


        <set attributeName="y" attributeType="XML" to="135" begin="MouthClipAnimation3.end-0.1" />

        <set attributeName="height" attributeType="XML" to="11" begin="MouthClipAnimation4.end-0.1" />

    </rect>

</clipPath>

<ellipse cx="100" cy="125" rx="30" ry="20" clip-path="url(#cut-off-bottom)" style="fill:rgb(230, 231, 194);stroke:black;stroke-width:2">


    <animate attributeName="cy" attributeType="XML" from="125" to="135" id="MouthEllipseAnimation1" begin="0;MouthEllipseAnimation4.end+3" dur="1s" />

    <animate attributeName="rx" attributeType="XML" from="30" to="8" id="MouthEllipseAnimation2" begin="0;MouthEllipseAnimation5.end+3" dur="1s" />

    <animate attributeName="ry" attributeType="XML" from="20" to="8" id="MouthEllipseAnimation3" begin="0;MouthEllipseAnimation6.end+3" dur="1s" />

    <set attributeName="cy" attributeType="XML" to="135" begin="MouthEllipseAnimation1.end-0.1" />

    <set attributeName="rx" attributeType="XML" to="8" begin="MouthEllipseAnimation2.end-0.1" />

    <set attributeName="ry" attributeType="XML" to="8" begin="MouthEllipseAnimation3.end-0.1" />


    <animate attributeName="cy" attributeType="XML" from="135" to="125" id="MouthEllipseAnimation4" begin="MouthEllipseAnimation1.end+3" dur="1s" />

    <animate attributeName="rx" attributeType="XML" from="8" to="30" id="MouthEllipseAnimation5" begin="MouthEllipseAnimation2.end+3" dur="1s" />

    <animate attributeName="ry" attributeType="XML" from="8" to="20" id="MouthEllipseAnimation6" begin="MouthEllipseAnimation3.end+3" dur="1s" />

    <set attributeName="cy" attributeType="XML" to="125" begin="MouthEllipseAnimation4.end-0.1" />

    <set attributeName="rx" attributeType="XML" to="30" begin="MouthEllipseAnimation5.end-0.1" />

    <set attributeName="ry" attributeType="XML" to="20" begin="MouthEllipseAnimation6.end-0.1" />

</ellipse>

盒子動畫效果：

<!--Box Anmation-->

        <rect x="0" y="165" width="14" height="14" stroke-width="2" fill="brown">

            <animate attributeName="width" attributeType="XML" from="0" to="210" id="leftToRight" begin="0;bottomToTop.end" dur="1s" />

            <set attributeName="width" attributeType="XML" to="14" begin="leftToRight.end-0.2" />

            <set attributeName="x" attributeType="XML" to="191" begin="leftToRight.end-0.2" />


            <animate attributeName="height" attributeType="XML" from="14" to="55" id="topToBottom" begin="leftToRight.end" dur="1s" />

            <set attributeName="height" attributeType="XML" to="14" begin="topToBottom.end-0.2" />

            <set attributeName="y" attributeType="XML" to="206" begin="topToBottom.end-0.2" />


            <animate attributeName="width" attributeType="XML" from="0" to="210" id="rightToLeft" begin="topToBottom.end" dur="1s" />

            <animate attributeName="x" attributeType="XML" from="206" to="0" id="rightToLeft" begin="topToBottom.end" dur="1s" />

            <set attributeName="width" attributeType="XML" to="14" begin="rightToLeft.end-0.2" />

            <set attributeName="x" attributeType="XML" to="0" begin="rightToLeft.end-0.2" />


            <animate attributeName="height" attributeType="XML" from="14" to="55" id="bottomToTop" begin="rightToLeft.end" dur="1s" />

            <animate attributeName="y" attributeType="XML" from="206" to="165" id="bottomToTop" begin="rightToLeft.end" dur="1s" />

            <set attributeName="height" attributeType="XML" to="14" begin="bottomToTop.end-0.2" />

            <set attributeName="y" attributeType="XML" to="165" begin="bottomToTop.end-0.2" />

        </rect>


        <line x1="0" y1="165" x2="205" y2="165" style="stroke:brown;

stroke-width:2" />

        <text x="14" y="200" font-family="Comic Sans MS'" fill="Blue">A coder can be creative</text>

輸出

SVG VS Canvas

SVG 和Canvas 區別：

Vector VS Pixel

Canvas 是基於Pixel 而SVG 是基於Vector

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

XML VS JavaScript

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

支援事件處理

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

HTML

  <svg width="120" height="120">

        <circle cx="60" cy="60" r="25" stroke="green" id="MyCircle" stroke-width="8" fill="yellow" onmouseover="IncreaseSize();" onmouseout="DecreaseSize();" />

    </svg>

<input type="button" value="+" onclick="ChangeSize();">

JavaScript

<script type="text/javascript">

    function IncreaseSize ()

    {

                    document.getElementById("MyCircle").r.baseVal.value=50;

    }

    function DecreaseSize()

    {

        document.getElementById("MyCircle").r.baseVal.value = 25;

    }

</script>

輸出

```
支援圖片儲存
```

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

下一章將要學習什麼？

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/28298702/viewspace-1986255/，如需轉載，請註明出處，否則將追究法律責任。

HTML5的SVG和Canvas的使用
2021-09-09
HTMLSVGCanvas
HTML5 SVG與Canvas的區別
2017-10-08
HTMLSVGCanvas
繪製SVG內容到Canvas的HTML5應用
2015-02-01
SVGCanvasHTML
06.HTML5(SVG和canvas)
2018-03-20
HTMLSVGCanvas
html5 canvas學習--操作與使用影象
2016-10-07
HTMLCanvas
svg vs canvas
2015-10-01
SVGCanvas
9款基於HTML5/SVG/Canvas的折線圖表應用
2014-05-14
HTMLSVGCanvas
SVG與Canvas的主要特性
2019-05-11
SVGCanvas
HTML5 快速學習二 Canvas
2014-11-25
HTMLCanvas
HTML5的Canvas
2011-06-20
HTMLCanvas
使用 HTML5 Canvas 繪製的水滴效果
2015-01-12
HTMLCanvas
Echarts渲染選擇SVG /canvas
2019-04-19
EchartsSVGCanvas
HTML 5 Canvas vs. SVG
2016-12-07
HTMLCanvasSVG
html5 canvas學習--繪製文字
2016-10-07
HTMLCanvas
HTML5學習筆記3 內聯SVG
2015-06-02
HTML筆記SVG
12款基於SVG的HTML5應用和動畫
2014-05-31
SVGHTML動畫
HTML5使用canvas繪製圖形
2015-09-27
HTMLCanvas
HTML5 -- Canvas
2016-12-14
HTMLCanvas
HTML5 SVG 特效示例
2015-04-18
HTMLSVG特效
HTML5的canvas標籤
2015-09-27
HTMLCanvas
HTML5學習之Canvas基礎知識
2018-05-05
HTMLCanvas
SVG 的使用
2018-07-29
SVG
HTML5 Canvas使用路徑——繪製圓形
2015-09-28
HTMLCanvas
HTML5:使用Canvas實時處理Video
2015-09-11
HTMLCanvasIDE
淺析HTML5的Canvas——1
2017-06-03
HTMLCanvas
HTML5(五)——Canvas API
2021-08-02
HTMLCanvasAPI
HTML5 Canvas 詳解
2018-04-20
HTMLCanvas
html5畫布canvas
2016-01-06
HTMLCanvas
html5 canvas分層
2014-06-19
HTMLCanvas
HTML5 & CSS3 初學者指南(4) – Canvas使用
2017-02-07
HTMLCSSS3Canvas
CSS、SVG、Canvas對特殊字型的繪製與匯出
2022-11-28
CSSSVGCanvas
淺談HTML5中canvas中的beginPath()和closePath()的重要性
2018-08-23
HTMLCanvas
使用HTML5 canvas做地圖（2）瓦片以及如何計算的
2013-12-02
HTMLCanvas地圖
HTML5系列之canvas用法
2019-02-16
HTMLCanvas
HTML5 Canvas API詳解
2015-02-10
HTMLCanvasAPI
畫影圖形: SVG & Canvas 圖形對比
2018-07-23
SVGCanvas
基於HTML5 Canvas實現使用者互動
2017-05-23
HTMLCanvas
使用canvas檢測HTML5視訊解碼錯誤
2013-11-08
CanvasHTML

三天學會HTML5——SVG和Canvas的使用

Lab1—— 使用Canvas

Lab 1.1 使用 Path

Lab 1.1.2 使用Multiple Begin Path建立Path

Lab1.1.3 理解ClosePath

Lab1.1.4 理解Fill

Lab1.1.5 畫曲線

Lab 1.2 使用Rectangle

Lab1.2.2 清除矩形

Lab 1.3 使用漸變色

Lab1.5 使用Text

Lab 1.7 旋轉

Lab 1.8 轉換

Lab 1.9 儲存和重置Canvas 的狀態

Lab1.11 使用Canvas 生成動畫

Lab 2 使用SVG 工作

Lab2.1 畫出多種形狀

Lab 2.2SVG 動畫

SVG VS Canvas

相關文章