《JavaScript高级程序设计》读书笔记（三）

《JavaScript高级程序设计》读书笔记

学习HTML新增的一些对象提供的API，包括canvas ，媒体事件等。(15-16章)

第十五章 使用 Canvas 绘图

基本用法

使用 <canves> 元素；指定 width 和 height 属性。

<canvas id="drawing" width="200" height="100">Your browser doesn't support canvas</canvas>

要在画布上绘制，还需取得绘图上下文。

var drawing = document.getElementById("drawing"),
//make sure <canvas> is completely supported
if (drawing.getContext){
    var context = drawing.getContext("2d");
}

2D 上下文

填充和描边：2D 上下文的两种基本绘图操作。
fillStyle 属性（填充）：指定的样式（颜色、渐变或图像）填充图形；
strokeStyle 属性（描边）：只在图形边缘画线。

绘制矩形：矩形是唯一一种可以直接在 2D上下文中绘制的形状。

与矩形有关的方法包括fillRect()、strokeRect和clearRect()。
这三个方法都能接收4个参数：矩形的x坐标、矩形的y坐标、矩形的宽度和矩形高度。

{% demo 绘制矩形 %}

{% enddemo %}

绘制路径：

首先调用 beginPath() 方法；
然后调用一下方法：
arc(x,y,radius,startAngle,endAngle,bool);
arcTo(x1,y1,x2,y2,radius);
lineTo(x,y);
moveTo(x,y);
rect(x,y,w,h);
最后调用 closePath() 方法。

绘制文本：fillText(str, x, y, width);strokeText(str, x, y, width)。

{% demo 绘制路径和文本 %}

{% enddemo %}

变换：
rotate(angle): 围绕原点旋转图像angle角度。
scale(scaleX, scaleY): 缩放图像。
translate(x,y)：将坐标原点移到（x,y）。

阴影：
shadowColor()
shadowOffsetX:x方向的阴影偏移量。
shadowOffsetY:y方向的阴影偏移量。
shadowBlur:模糊的像素数，默认为0不模糊。

渐变：渐变由 CanvasGradient 实例表示。

线性渐变：createLinearGradient(x1,y1,x2,y2);

var gradient = context.createLinearGradient(30,30,70,70);
    gradient.addColorStop(0,"orange");
    gradient.addColorStop(1, "blue");
    context.fillStyle = gradient;
    context.fillRect(30, 30,70,70);

径向渐变：createRadialGradient(x1,y1,r1,x2,y2,r2);

var gra = context.createRadialGradient(55,55,10,55,55,30);
    gra.addColorStop(0, "blue");
    gra.addColorStop(1, "orange");
    context.fillStyle = gra;
    context.fillRect(30,30,50,50);

模式：模式就是重复的图像，可以用来填充或描边图形。

createPattern(img, str);
img： 表示一个 HTML 的 img 元素；
str： 可取值 “repeat”、“repeat-x”、“repeat-y”和“no-repeat”。

var img = document.images[0];
var pattern = context.createPattern(img, "repeat");
context.fillStyle = pattern;
context.fillRect(10,10,150,150);

WebGL

WebGL 是针对 Canvas 的 3D 上下文。

第十六章 HTML5 脚本编程

跨文档消息传递

跨文档消息传递，简称XDM，指的是来自不同域的页面间传递消息。

postMessage() 发送消息：

var iframeWindow = document.getElementById("myFrame").contentWindow;
iframeWindow.postMessage("A secret", "http://www.wshunli.com");

接收消息，触发 window 对象的 message 事件，异步方式。

window.addEventListener("message",function(){
    if(event.origin == "http://www.wshunli.com"){//发送消息的文档所在的域
      processMessage(event.data); //处理接收的数据
      event.source.postMessage("Received!", "http://github.com"); //可选：向来源窗口发送回执
  }
},false)

媒体元素

HTML5新增了 <audio> 和 <video> 两个标签。

<video src="conference.mpg" id="muvideo">video palyer not available</video>
<audio src="song.mp3" id="myAudio">audio player not available</audio>