HTML5 基础知识,第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值,Canvas 提供的创造性,以及Web storage的离线应用

HTML5 集设计者和开发者于一身,其主要任务就是构建高效的丰富 Internet 应用程序之富网络应用 (Rich Internet Application,简称RIA),尤其是富 UI(User Interface,用户界面)。所说的高效是指进行系统的、全面的改进,以数字的方式为站点所有者、所有者代理和站点使用者之间的对话提供便利。

RIA 是满足用户体验的本源和工具,因此也是任何以网络为中心的成功企业的关键组成部分。实质上,以网络为中心的活动在某种程度上是协作性的活动。当机构想在各个级别(包括市场营销和管理)上取得成功时,实现数字协作的成功方法至关重要。站点的成功主要取决于站点满足访问用户的质量要求的效率。

如您所见,HTML5 是专门为实现具有跨平台功能、融合电信、统一语言、广泛计算和开源系统的协作式 “网络世界” 而量身定制的。符合逻辑的 RIA 是丰富用户体验的创建和管理,对于实现站点目标是重要的。HTML5 API 在开发高效 RIA 的过程中扮演重要角色。

一、什么是 API?

API是Application Programming Interface(应用程序编程接口)的缩写,它是编程指令集合和访问软件应用程序的标准。通过调用一个 API,可以利用 API 提供的服务设计出强大的产品。

HTML5 提供了一些 API:

  • 用于渲染图形或其他可视图像的新 canvas 元素所使用的 2D 绘图 API
  • 支持离线 Web 应用程序的缓存 API
  • 使用新 video 和 audio 元素来播放视频和音频的 API
  • 支持浏览历史访问和添加页面的历史 API
  • draggable 属性支持的拖放 API
  • contenteditable 属性支持的编辑 API
  • 使用 JavaScript API 进行键-值对存储的客户端存储及嵌入式 SQL 数据库

二、什么是 Canvas?

HTML5 Canvas 是一个极其有用的绘制和动画元素。Canvas 使用 JavaScript 直接在页面上绘制图形。Canvas 能够定义和控制矩形区域,并允许以动态方式或通过脚本呈现 2D 形状和位图。

对于生成能够增强 UI、图表、相册、图形、动画和嵌入式绘制应用程序的出色视觉材料而言,HTML5 Canvas 非常完美。Canvas 元素可以通过几种方法来绘制路径、矩形、圆形和字符。

1. Canvas 坐标

在画布上进行绘制的前提条件是熟悉网格和坐标空间。空间区域的长度和宽度的单位为像素。用户可以围绕 x 和 y 坐标构建画布。当坐标为 x=0, y=0 时,画布原点位于左上角。 如图1所示。

图 1. x、y坐标 xy坐标

矩形画布区域的默认宽度为 300 像素,高度为 150 像素,但您可以通过修改这两个属性来获得所需的画布大小。图2 显示了如何实现 x 和 y 坐标。

图 2. 画布坐标 画布坐标

图 2 显示了长宽都为 100 像素的画布区域:

  • 左上角的坐标为 x=0, y=0。
  • x 值在水平方向增加,而 y 值在垂直方向增加。
  • 右下角的坐标为 x=100, y=100。
  • 中心点的坐标为 x=50, y=50。

2. 起步

在向画布添加内容之前,必须先在 HTML 文件中定义画布,必须创建 JavaScript 代码,用它来访问 标记并与 HTML5 Canvas API 通信,这样就可以绘制图形。

标记的基本结构为:

canvas 标记有两个专有的属性:width 和 height。此外,Canvas 还拥有所有关键的 HTML5 属性,比如 class、id 和 name。在上面显示的代码中就用到了 id 属性。JavaScript 代码使用这里创建的画布 id 来识别要绘制内容的画布。

JavaScript代码使用 document.getElementById()方法来确定正确的画布:

var canvas = document.getElementById("myCanvas");

每个画布都必须有一个上下文对象定义。到目前为止,官方的规范仅识别 2D 环境(3D绘图通过“webgl”参数创建上下文对象,仅对支持WebGL的浏览器有效):

var context = canvas.getContext("2d");

在识别画布并指定其上下文之后,就可以在其上绘制内容了。

3. 绘制工具、效果和变形

讨论描述HTML5 Canvas 将用到的各种绘制工具、效果和变形。

这些绘制工具包括:

  • 线条
  • 矩形
  • 弧形
  • 贝塞尔曲线和二次方曲线
  • 圆形和半圆形

将使用的画布效果包括:

  • 填充和笔触
  • 线性渐变和辐射渐变

要讨论的变形包括:

  • 缩放
  • 旋转
  • 转换

绘制线条

要在画布上绘制线条,使用到的方法:

  • context.beginPath();
  • context.moveTo(x,y);
  • context.lineTo(x,y);
  • context.stroke(x,y);

beginPath() 方法将启用一个新路径。在使用不同的子路径绘制新的线条之前,必须使用 beginPath()来表明绘制的新起点。首次绘制线条时没有必要调用 beginPath()方法。

moveTo()方法会声明新的子路径的开始点。lineTo()方法用于创建子路径。可以通过lineWidth和 strokeStyle改变线条的外观。lineWidth元素用于改变线条的粗细,而 strokeStyle 则用于改变线条的颜色。

方法moveTo()和lineTo()实际上并不画线,而是在结束canvas操作的时候,通过调用stroke()方法完成线条的绘制。

对上下文的很多操作都不会立即反映页面上。beginPath()moveTo()lineTo()这些函数都不会直接修改canvas的展示结果。canvas中很多用于设置样式和外观的函数也同样不会直接修改显示结果。只有当对上下文对象应用绘制方法stroke() 或填充方法fill()时,结果才会显示出来。

在图 3 中,分别绘制了蓝色、绿色和紫色的线条。

图 3. 画布线条 画布线条

图 3 中的线条是通过 '清单 1' 中的代码创建的。

清单 1. 在画布上创建 3 个颜色不同的线条

<!DOCTYPE HTML>
<html>
    <head>
        <title>线条示例</title>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }

            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
            window.onload = function() {
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                // 圆形端的蓝色线
                context.beginPath();
                context.moveTo(50, 50);
                context.lineTo(300,50);
                context.lineWidth = 10;
                context.strokeStyle = "#0000FF"; 
                context.lineCap = "round";
                context.stroke();

                // 方形端的绿色线
                context.beginPath();
                context.moveTo(50, 100);
                context.lineTo(300,100);
                context.lineWidth = 20;
                context.strokeStyle = "#00FF00"; 
                context.lineCap = "square";
                context.stroke();

                // 平头端的紫色线
                context.beginPath();
                context.moveTo(50, 150);
                context.lineTo(300, 150);
                context.lineWidth = 30;
                context.strokeStyle = "#FF00FF"; 
                context.lineCap = "butt";
                context.stroke();
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="400" height="200">
        </canvas>
    </body>
</html>

蓝色的线条两端是圆角的,创建它的时候,首先要确定一个新路径即将开始:context.beginPath()。其创建过程如下所示:

  • context.moveTo(50, 50),将路径的开始点置于 (x=50, y=50)
  • context.lineTo(300,50),识别线条的结束点
  • context.lineWidth = 10,线条的宽度
  • context.strokeStyle = "#0000FF",线条的颜色
  • context.lineCap = "round",使线条的两端变圆
  • context.stroke(),真实地将线条绘制在画布上

上面的 3 个线条的长度都是 50 像素,但它们看起来不一样长,这是由线条两端套盖 (cap) 引起的视觉混淆。有 3 种可用的末端套盖:

  • context.round(圆形)
  • context.square(方形)
  • context.butt(平头形,默认)

butt 套盖是默认值。使用 round 或 square 套盖样式时,线条的长度将增加,增加的量为线条自身的宽度。例如,如果长度为 200 像素、宽度为 10 像素的线条采用 round 或 square 套盖样式,那么将导致线条的长度变为 210 像素,因为将在线条的两端各增加一个长度为 5 像素的套盖。如果长度为 200 像素、宽度为 20 像素的线条采用 round 或 square 套盖样式,那么将导致线条的长度变为 220 像素,因为将在线条的两端各增加一个长度为 10 像素的套盖。

绘制矩形

在画布上绘制矩形区域有 3 种方法:

  • fillRect(x,y,width,height),绘制已填充的矩形
  • strokeRect(x,y,width,height),绘制矩形框线
  • clearRect(x,y,width,height),擦除矩形的给定区域使之完全透明

对于这 3 种方法而言,x 和 y 表示矩形在画布上相对于左上角的位置(x=0, y=0),而 width 和 height 分别是矩形的宽度和高度。

图 4 显示了由 清单 2 中的代码创建的 3 个矩形区域。

图 4. 矩形画布 矩形画布

fillRect() 方法创建了一个矩形并使用默认的黑色填充它。clearRect()方法在第一个矩形的中心擦除一块矩形区域,该区域位于 fillRect() 方法所创建的矩形的中心。strokeRect()方法创建一个仅黑色边框可见的矩形。

清单 2. 矩形画布代码

<!DOCTYPE HTML>
<html>
<head>
    <title>Rectangle Example</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        #myCanvas {
            border: 1px solid #000000;
            background-color: #ffff00;
        }
    </style>
    <script type="text/javascript">
         function drawShape(){
             var canvas = document.getElementById('myCanvas');
             var context = canvas.getContext('2d');

             context.fillRect(25,25,50,50);
             context.clearRect(35,35,30,30);
             context.strokeRect(100,100,50,50);

         }
     </script>
</head>
<body onload="drawShape();">
     <canvas id="myCanvas" width="200" height="200"></canvas>
</body>
</html>

绘制弧形、曲线、圆形和半圆形

绘制圆形和半圆形都使用 arc() 方法。arc() 方法接收 6 个参数:

context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);

centerX 和 centerY 参数是圆心的坐标。radius 的含义和其数学上半径的含义一样:表示从圆心到圆周的直线距离。所创建的弧形将作为圆形的一部分。startAngle 和 endAngle 参数分别为弧形的起点和终端,单位为弧度。anticlockwise 参数是一个布尔值。当其值为 true 时,弧形就逆时针绘制;当为 false 时,弧形就顺时针绘制。

要使用 arc() 方法绘制圆形,将起始角度定义为 0,结束角度为 2*PI,如下所示:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

要使用 arc() 方法绘制半圆形,将结束角度定义为 startingAngle + PI,如下所示:

context.arc(centerX, centerY, radius, startingAngle, startingAngle + Math.PI, false);

二次方曲线

使用 quadraticCurveTo() 方法创建二次方曲线 ,如下所示。二次方曲线由上下文点、控制点和结束点定义。控制点确定线条的曲度。

context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, endX, endY);

贝塞尔曲线

与二次方曲线一样,贝塞尔(Bezier)曲线也有一个起始点和一个结束点;但与二次方曲线不同的是,它有两个控制点:

context.moveTo(x, y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

使用 bezierCurveTo() 方法来创建贝塞尔曲线。因为贝塞尔曲线通过两个而不是一个控制点来定义,所以可以创建更加复杂的曲线。

图 5 从左到右分别显示了弧形、二次方曲线、贝塞尔曲线、半圆形和圆形。

图 5. 弧形、曲线和圆形 弧形画布

清单 3. 弧形、曲线和圆形的代码

<!DOCTYPE HTML>
<html>
<head>
    <title>圆弧,曲线,
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值