Start at 2013/8/15 20:52:41
常伟华

第 1 章 HTML5 简介

HTML 简史

1997 年,W3C 正式宣布将 HTML 4.0 作为 W3C 的推荐标准。HTML 4.0 与其前面的版本差别很大,而且带来了一些强大的新功能,如CSS和客户端脚本。

HTML 4.01 于 1999 年 12 月发布,但它并没有引入任何重要的新功能。它的主要目的是修正规范中的一些错误,并做了一些小的修改。

对 HTML5 的误解

对所有新技术而言,肤浅的理解往往会导致对它的目的及左右产生误会。

  • CSS3 误解

    支持 HTML 的 CSS 是 1996 年开始出现的,它是一项老技术。最新版本的 CSS3 是从 2005 年开始开发的,但它距离 W3C 的正式推荐还差得很远。

    对 CSS 需要注意的重要方面是它在开发和使用方面都是与 HTML 独立的。CSS3 不属于 HTML5 规范。

  • Web Fonts 误解

    Web 设计的一个不足是很难使用自定义字体。直到最近,我们能使用的唯一方法就是创建静态图片来描述所希望使用的单词,或者使用复杂的系统,如 sIFR 或 cufon。Web Fonts 将 @font-face 规则引入 CSS,这使得我们通过简短的代码就能够使用自定义字体。

    Web Fonts 属于 CSS3,并且技术上已经不再称为 Web Fonts。

  • Geolocation 误解

    想象一下,不管你在哪里,都可以在 Web 上自动获取与你当前位置有关的信息。Geolocation API 就支持这个功能,它通过一些简单的 JavaScript 向 Web 开发人员提供了一种了解用户位置的方法。用户必须允许共享他的位置信息。

    Geolocation API 是一种 JavaScript API,是由支持它的浏览器实现的。

  • SVG 误解

    SVG 是一种允许你使用 XML 创建 2D 矢量图形的语言。它在功能和用途上与 Canvas 非常类似,但是在其他方面有很大区别。

    SVG 是一种使用 XML 来描述图形的完全独立的技术。

  • Web Storage 误解

    Cookies 是在用户计算机上存储少量信息的方法。直到现在,它仍然是唯一一个在客户端上存储数据的有效方法,但是它有一些小缺陷可能会导致许多问题。

    Web Storage 是一组 JavaScript API,它的目的是实现一组强大的新存储方法,解决使用 Cookie 的内在缺陷。表面上看它们没有什么新奇之处,但是它们提供了一些很好的功能,如离线查看基于浏览器的电子邮件收件箱。

    Web Storage 是一种 JavaScript API,是由支持它的浏览器实现的。

  • Web Workers 误解

    Web Workers 实际上是一个不知疲倦的 JavaScript “工作狂”,随时准备执行你的命令。它们的唯一用途是在后台执行一些繁重的计算及其他高强度任务,从而不会导致网页显示减慢或影响用户体验。Web Workers 的使用场景并不多,但是了解它们的用处是很有帮助的。

    Web Workers 是一种 JavaScript API,是由支持它的浏览器实现的。

  • WebSocket 误解

    一般的 Web 通信是通过 HTTP 实现的,HTTP 是一种一次只允许在一个方向进行通信的方法,每当你需要获取新数据时,都要请求一个网页。为了解决这个问题,Web 开发人员使用许多方法来回避请求新页面。诸如 Ajax 和 Comet 等技术正式为此目的而诞生的。然而,它们仍然不是真正的双向通信方法——每次信息都是在一个方向传输的。

    WebSocket 则不同,它使用支持在客户端和服务器之间实现真正的双向通信的 TCP 协议。这意味着你不需要重新发送新的数据请求道服务器,因为当新数据出现时,信息是实时传输到你的计算机的。这是一个复杂的概念,但是一旦掌握了这种技术,它就是一种非常强大的工具。

    WebSocket 是一种 JavaScript API,是由支持它的浏览器实现的。

第 2 章 JavaScript 基础

概述

JavaScript 和 JScript 几乎完全相同,虽然它们各自都具有一些对方所不具备的功能,需要注意的是,除了 IE 之外的所有主流浏览器都使用 JavaScript,而不使用 JScript。

ECMAScript 是一种标准化的脚本语言,它来源于 Netscape 的 JavaScript。支持 ECMAScript 规范是 JavaScript 和 JScript 的共同目标。

jQuery

jQuery 是一个 JavaScript 库,它实际上对 JavaScript 中最复杂和最耗时的任务的一个简单封装,如遍历 DOM 、事件处理和动画。

第 3 章 Canvas 基础知识

认识 canvas 元素

canvas 元素完全不需要任何外部插件就能够。你只需要使用 HTML 并使用 2D 渲染上下文 API 编写一些 JavaScript 代码。默认 300px * 150px

<canvas width="500" height="500">
    <!-- 此处插入后备内容 -->
</canvas>

大多数浏览器都支持 canvas 元素及其主要特性,但是毫无疑问,IE 还不支持这些,至少 IE 9之前的版本是不支持的。可以使用强大的 ExplorerCanvas脚本。

2D 渲染上下文

canvas 元素并非 Canvas 中最强大的部分,真正的关键部分是 2D 渲染上下文,这是你真正绘制图形的地方。canvas 元素的用途只是作为 2D 渲染上下文的包装器,它包含绘图和图像操作所需要的全部方法和丰富功能。

  1. 坐标系统

    2D 渲染上下文是一种基于屏幕的标准绘图平台。与其他的 2D 平台类似,它采用平面的笛卡尔坐标系统,左上角为原点 (0, 0)。

  2. 访问 2D 渲染上下文

绘制基本图形和线条

  • 线条 绘制线条和绘制图形有一些区别。它们实际上称为路径。要绘制一个简单的路径,首先必须在 2D 渲染上下文中调用 beginPath 方法,下一个调用的方法是 moveTo,它会设置要绘制路径的原点坐标(x, y)。然后调用 lineTo 方法设置线条的终点坐标(x, y),再调用 closePath 完成路径的绘制。最后,调用stroke 绘制它的轮廓,显示线条。

    context.beginPath();
    context.moveTo(40, 40);
    context.lineTo(340, 40);
    context.closePath();
    context.stroke();
    
  • 圆形 圆形是一个非常复杂的形状,因此 Canvas 实际上并没有专门绘制圆形的方法。但是有一个方法可以绘制圆弧,圆弧实际上是圆形的组成部分——首尾相连的圆弧就是圆形。

    context.beginPath();
    context.arc(230, 90, 50, 0, Math.PI * 2, false);
    context.closePath();
    context.fill();
    

    创建一个圆弧需要使用 6 个参数:圆弧原点的(x, y)坐标值(圆心)、圆弧半径、开始角度,结束角度和一个布尔值(true表示按逆时针方向绘制,false为顺时针方向)。 context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

    水平右边为绘制起始点,即顺时针从下边开始绘制,逆时针从上边开始绘制

样式

通过设置 2D 渲染上下文的 fillStyle 属性,你就能够修改形状和路径的填充颜色。

context.fillStyle = "rgb(255, 255, 0)";
context.fillStyle = "rgba(255, 0, 0, 0.3)";
context.fill();

context.strokeStyle = "rgb(255, 255, 0)";
context.strokeStyle = "rgba(255, 0, 0, 0.3)";
context.stroke();

修改线宽,lineWidth,默认为 1,可以将修改为任意值。

Continued at 2013/8/16 20:18:09

绘制文本

Canvas 不仅能绘制图形,还能够显示文本。Canvas 中的文本是以图像形式绘制的,这意味着它无法像 HTML 文档中的普通文字一样用鼠标指针选取————他实际上不是文本,只是像文本而已。

context.fillText(text, x, y);//第一个参数要绘制的文本,第二个和第三个参数是文本左下角的(x, y)的坐标。

属性 font 可以设置字号和字体,可接受与 CSS 的 font 属性完全相同的字符串值。 context.font = "65px 浪漫雅圆";

创建描边文字 context.strokeText('Hello, word !', 60, 160);

擦除 Canvas

clearRect 方法以及宽度/高度技巧 context.clearRect(x, y, width, height)//(x, y)清除区域的原点坐标,width 和 height 为清除区域矩形的宽度和高度

使 Canvas 填满浏览器窗口

canvas 并不支持百分比的属性值,会将100%解释为100像素,200%解释为200像素,以此类推。

<style type="text/css">
    * { margin:0; padding: 0;}
    html, body{ height: 100%; height: 100%;}
    canvas{ display: block;}
</style>

function SetCanvas() {
    var canvas = $('#myCanvas');
    var context = canvas.get(0).getContext('2d');
    canvas.attr('width', $(window).get(0).innerWidth);
    canvas.attr('height', $(window).get(0).innerHeight);

    // context.fillRect(0, 0, canvas.width(), canvas.height());

}

$(function(){

    $(window).resize(function(){
        SetCanvas();
    });

    SetCanvas();
});

上述方法有缺陷,就是窗体调整大小之后,会导致 canvas 重置。修改宽度和高度会重置 Canvas,因此所有内容都必须重新绘制。

Canvas 高级功能

保存和恢复绘图状态

  • 画布绘图状态是什么

    在画布中,绘图状态指的是描述某一时刻 2D 渲染上下文外观的整套属性,从简单的颜色值到复杂的变换矩阵及其他特性。

    用于描述画布绘图状态的全部属性为:变换矩阵、裁剪区域、globalAlpha、globalCompositeOperation、strokeStyle、fillStyle、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、font、textAlign 和 textBaseline。

    有一点很重要,画布上的当前路径和当前位图(正在显示的内容)并不属于状态。我们更应该将状态看做 2D 渲染上下文属性的描述,而不是画布上显示的所有内容的副本。

  • 保存绘画状态

    保存画布状态非常简单。只需要调用 2D 渲染上下文的 save 方法。

    2D 渲染上下文会保存一个绘图状态栈,实际上它是一组之前保存的状态,其中最近保存的状态位于顶部。绘图状态的默认栈是空的,调用 save 方法,就会有一个新状态被放入(添加到)这个栈。这意味着,你完全可以多次调用 save 方法,将多个绘图状态逐一保存到栈中,其中最早的状态在底部。然而,你无法将任何绘图状态后移,因为这个过程是有严格顺序的。

  • 恢复绘图状态

    调用 restore 方法。

    通过调用 restore 方法,你能够自动取出最好添加到栈中的绘图状态,并将它应用于 2D 渲染上下文,用所保存的状态覆盖全部现有的样式

  • 保存和恢复多个绘图状态

    通过多次调用 restore 方法。

变形

每一种编写方法,都会影响方法执行后所绘制的所有元素。这是因为它们都是直接在 2D 渲染上下文上操作的,而不是只针对所绘制的图形。

  • 平移

    最基本的操作就是平移,即将 2D 渲染上下文的原点从一个位置移动到另一个位置。在画布中进行平移使用的是 translate 方法时,实际上它移动的是 2D 渲染上下文的坐标原点,而不是所绘制的对象

    调用方法

    context.translate(x, y);
    

    (x, y) 表示把 2D 渲染上下文的原点移动多远。一定要注意,将来你所指定的(x, y)坐标值会加上原点的平移,原点最初的默认值是(0, 0)。

  • 缩放

    调整 2D 渲染上下文的尺寸。(x, y)参数是缩放倍数,而不是像素值。

    单独使用 scale 将使所有绘图内容变大,而且它也会使一些对象被画在一些不恰当的位置上。

  • 选择

    通过选择角度来打破正方形像素的概念。

    rotate(degree);传入以弧度为单位的 2D 渲染上下文旋转角度值(Math.PI/4)

    rotate 方法是把 2D 渲染上下文绕其原点(0, 0)进行旋转的。因此当你只想旋转所要绘制的图形时,需要将 2D 渲染上下文的原点平移到正在绘制的图形的中心。然后,再对画布执行一次旋转,节奏在当前位置绘制图形。

  • 变换矩阵

    到目前为止,所使用的所有变形方法都会影响一个东西,那就是变换矩阵。

    待续。。。。。

    To be continued 。。。。。。

合成

简而言之,组合就是将多个可视化元素组合成为一个可视化元素。

在画布中绘制的所有东西都是已经合成的,这意味着绘制的所有内容都会与已经绘制的现有元素合并在一起。这实际上都是基本合成,只是将一些内容叠加到另一些内容之上。

修改全局合成属性会影响到修改之后所绘制的全部内容。

本人尚未理解透彻,待续。。。。。。

阴影

阴影,能够增强图像的真实感。然后,如果操作不当,也可能完全毁掉一个图像。

在画布中创建阴影效果是相对简单的,它可以通过 4 个全局属性进行控制。这些属性是 shadowBlur、shadowOffsetX、shadowOffsetY 和 shadowColor。默认情况下,2D 渲染上下文是不会绘制阴影效果的,因为 shadowBlur、shadowOffsetX 和 shadowOffsetY 都设置为 0, 而 shadowColor 则设置为透明黑色。创建阴影效果的唯一方法是将 shadowColor 修改为不透明值,同时将 shadowBlur、shadowOffsetX 或 shadowOffsetY 都设置为非 0 值。

context.shadowBlur = 20;
context.shadowColor = "rgb(0, 0, 0)";
context.fillRect(-50, -50, 100, 100);

通过组合使用各种模糊和颜色值,我们就能够实现一些与阴影完全无关的效果。

渐变

有时候,简单的颜色并不够用,或者你确实需要给图像颜色增加额外的真实元素。无聊是何种情况,画布的渐变颜色肯定都是一致可以考虑的方法,fillStyle 和 strokeStyle 都可以直接接受以 CanvasGradient 对象表示的渐变颜色值。

画布支持两种类型的渐变:线性渐变和放射渐变。每一种渐变在 2D 渲染上下文中都有对应的创建方法,线性渐变对应的是 createLinearGradient,而放射渐变对应的是 createRadialGradient。这两种方法都返回一个 CanvasGradient 对象,可以使用 CanvasGradient 对象本身的 addColorStop 方法对它进行下一步处理。

Paused at 2013/8/16 21:48:11
Will back soon

知识共享许可协议
《HTML5 CANVAS基础教程1》 常伟华 创作。
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议 | 3.0 中国大陆许可协议进行许可。

站内公告

A PHP Error was encountered

Severity: Core Warning

Message: PHP Startup: zip: Unable to initialize module Module compiled with module API=20060613 PHP compiled with module API=20090626 These options need to match

Filename: Unknown

Line Number: 0

Backtrace: