3 天学会 HTML 5 - 第二天 - 第 1 部分

Marla Sukesh

4.67/5 (24投票s)

2015年3月24日

CPOL

7分钟阅读

51570

129

欢迎来到“3天学会HTML 5”系列课程的第二天（第一部分）。

引言

第一天完成后过了很久，我终于开始了第二天的内容。

在第一天，我们学习了一些基础但重要的HTML 5主题。今天我们将深入探讨一些高级内容。

在第一天，我们主要关注了

新的标签和控件
新的验证功能
应用程序缓存

完整列表

第二天议程

为了使文章简短明了，我决定将第二天分为两部分。

第一部分议程

实验 12 - 使用 Canvas
实验 13 – 使用 SVG
SVG vs Canvas

第二部分议程

实验 14 - HTML5 媒体
实验 15 – 拖放
实验 16 – 地理位置
实验 18 – Web Worker
实验 19 – Web Worker 和 Ajax
实验 20 – 服务器发送事件

实验 12 - 使用 Canvas

什么是 Canvas？

Canvas 就像一块绘图板。

它提供了一个具有特定宽度和高度的矩形区域。
我们将使用新的HTML 5 JavaScript API，在该矩形区域（canvas）中绘制各种不同大小、颜色和图案的形状。

让我们通过几个实验来理解 Canvas。

初始设置

步骤 1

创建一个HTML页面。

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

第二步

在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

创建一个名为“Draw”的JavaScript函数，并将其放在script标签内。

在Draw函数内部获取canvas对象。

function Draw()

{
        var ctx = document.getElementById('MyCanvas').getContext("2d");      
        //Canvas Code Comes Here
}

实验 12.1 使用路径
什么是路径？

路径只是零个或多个子路径的列表。
每个子路径都是一个或多个端点的列表。
子路径中的每个端点将通过直线或曲线连接。

实验 12.1.1 – 使用单一 Begin 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();

输出

解释

在上面的例子中，完整的路径由两个子路径组成。

BeginPath – 创建一个新路径。
我们首先构建带有子路径的结构，然后使用 stroke() 方法一次性描边所有这些子路径。
strokeStyle 将用于设置当前样式。
每次调用 stroke 方法时，所有子路径都将以当前样式被描边。
在上面的例子中，
- 第一个 stroke 方法在坐标 (75,50) 和 (75,100) 之间以蓝色绘制子路径。
- 第二个 stroke 方法将绘制 2 个子路径（都为红色）。
  - 一个在坐标 (75,50) 和 (75,100) 之间。
  - 第二个在 (75,100) 和 (25,100) 之间。

(这就是为什么 canvas 中的第一个子路径既不是红色也不是蓝色，而是两者的混合)。

实验 12.1.2 – 使用多个 Begin 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();

输出

实验 12.1.3 – 理解 ClosePath

代码片段

ctx.beginPath();

ctx.strokeStyle = "blue";

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.lineTo(25, 100);

ctx.closePath();

ctx.stroke();

输出

解释

closePath – 从当前点到起始点进行lineTo绘制。

实验 12.1.4 – 理解 Fill

代码片段

ctx.beginPath();

ctx.moveTo(75, 50);

ctx.lineTo(75, 100);

ctx.lineTo(25, 100);

ctx.fillStyle = "red";

ctx.fill();

输出

实验 12.1.5 – 绘制曲线

代码片段

ctx.beginPath();

ctx.moveTo(175, 50)

ctx.quadraticCurveTo(60, 360, 175, 300);

ctx.stroke()

输出

解释

quadraticCurveTo 函数接受四个参数。

前两个点是用于二次贝塞尔曲线计算的控制点，后两个点是曲线的结束点。

实验 12.2 使用矩形

实验 12.2.1 绘制矩形

代码片段

ctx.fillStyle="red";

ctx.fillRect(75, 75, 150, 150);

           

ctx.strokeStyle = "black";

ctx.lineWidth = 5;

ctx.strokeRect(175,175,150,150);

输出

实验 12.2.2 清除矩形

代码片段

ctx.fillStyle="red";

ctx.fillRect(75, 75, 250, 250);

ctx.clearRect(125, 125, 100, 100);

输出

实验 12.3 使用渐变

实验 12.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);

输出

解释

CreateLinearGradient 接受 4 个参数 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

实验 12.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。

x1,y1,r1 代表起始圆的中心和半径。
x2,y2,r2 代表结束圆的中心和半径。

渐变从起始圆开始，向结束圆移动。

实验 12.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 是圆的起始角度和结束角度。

角度可以用度或弧度来测量。

在使用弧度时，数学常数 PI (π) 表示半圆，2*PI 表示整圆。

实验 12.5 使用文本

代码片段

ctx.beginPath();

ctx.font = "30px Segoe UI";

ctx.fillText("www.StepByStepSchools.Net",0, 150);

输出

解释

fillText/strokeText 简单地接受 3 个参数。

实际文本
X 和 Y 坐标

实验 12.6 缩放

代码片段

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

ctx.scale(2,2);

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

输出

解释

Scale 方法简单地缩放所有未来绘图的位置和直径。

在上面的例子中，它被放大了 200%。

实验 12.7 旋转

代码片段

ctx.rotate(0.2);

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

输出

解释

旋转未来绘图指定的角度。

实验 12.8 平移

代码片段

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

ctx.translate(150, 150);

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

输出

解释

Translate 方法重新映射 canvas 中的 (0,0) 位置。

注意：我们也可以使用一个简单的“settransform”方法，该方法允许我们一次性进行缩放、旋转和翻译。

实验 12.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);

输出

解释

Save 方法会将当前的 canvas 状态存储在 canvas 中。

Restore 方法会从堆栈中弹出最后一个保存的状态并将其设置为 canvas。

实验 12.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();
};

输出

实验 12.11 使用 Canvas 进行动画

一旦我们在 canvas 中绘制了某些内容，就无法更改它。为了对现有绘图进行一些修改，
1. 我们使用“clearRect”函数来删除现有绘图。
2. 然后用新的属性重新绘制。

当上述策略与传统的JavaScript函数（如 Windows.Timeout 或 Window.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);

输出

注意：上面的图像是实际输出的录制 GIF 版本。因此，动画在中间重新开始，那是因为它不是真正的 HTML 动画（在这里）。请求您从顶部下载源代码并运行。

实验 13 – 使用 SVG

与 Canvas 一样，SVG 允许我们在矩形区域内绘制图像。我们将看到 Canvas 和 SVG 之间的区别，但在此之前，让我们做一个 SVG 实验。

初始设置

步骤 1

创建一个HTML页面。

<html>

<head></head>

<body></body>

</html>

第二步

在body标签内按如下方式创建canvas。

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

</SVG >

实验 13.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>

输出

实验 13.1 SVG 动画

SVG 的声明式编程方式使得动画更加容易。让我们为上面的 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 之间的主要区别

矢量 vs 像素

Canvas 基于像素，而 SVG 基于矢量。

看下面的输出。

简单来说，SVG 图像是分辨率无关的，而 canvas 图像则不是。

XML vs JavaScript

在 SVG 中，我们使用语义标签（xml 标签）进行所有绘图（如绘制各种形状、线条），而在 Canvas 中，JavaScript 是唯一的方式。

它使 SVG 中的每个形状都成为一个元素。我们可以使用传统的 JavaScript 函数（如“document.getElementById”）在 JavaScript 中访问这些元素，并动态更改任何属性。

注意：有关实际演示，请参阅下一个演示。

事件处理器支持

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 将无法实现。

第三天会有什么内容？

实验 21 – 理解 CSS 3
实验 22 – 理解 Microdata
实验 23 – Web 存储
实验 24 – Web Socket
实验 25 – Web SQL
实验 26 – IndexDB

让我们狂欢吧！

希望您喜欢第二天。请继续关注第三天。不要忘记以评论的形式留下您的想法和建议。

有关离线培训咨询，请单击此处。

有关在线培训咨询，请单击此处。

有关视频培训咨询，请单击此处。

3 天学会 HTML 5 - 第二天 - 第 1 部分

引言

完整列表

第二天议程

第一部分议程

第二部分议程

实验 12 - 使用 Canvas

什么是 Canvas？

初始设置

实验 12.1 使用路径 什么是路径？

实验 12.1.1 – 使用单一 Begin Path 创建路径

实验 12.1.2 – 使用多个 Begin Path 创建路径

实验 12.1.3 – 理解 ClosePath

实验 12.1.4 – 理解 Fill

实验 12.1.5 – 绘制曲线

实验 12.2 使用矩形

实验 12.2.1 绘制矩形

实验 12.2.2 清除矩形

实验 12.3 使用渐变

实验 12.3.1 使用线性渐变

实验 12.3.2 使用径向渐变

实验 12.4 使用圆形

实验 12.5 使用文本

实验 12.6 缩放

实验 12.7 旋转

实验 12.8 平移

实验 12.9 保存和恢复 canvas 状态

实验 12.10 使用图像

实验 12.11 使用 Canvas 进行动画

实验 13 – 使用 SVG

初始设置

实验 13.1 使用各种形状

实验 13.1 SVG 动画

SVG vs Canvas

矢量 vs 像素

XML vs JavaScript

事件处理器支持

保存图像的支持

第三天会有什么内容？

让我们狂欢吧！

实验 12.1 使用路径
什么是路径？