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

Author Avatar
wshunli 11月 07, 2017
  • 在其它设备中阅读本文章
《JavaScript高级程序设计》读书笔记 **学习HTML新增的一些对象提供的API,包括canvas ,媒体事件等。**(15-16章) # 第十五章 使用 Canvas 绘图 ## 基本用法 使用 `` 元素;指定 width 和 height 属性。 ``` JavaScriptYour browser doesn't support canvas``` 要在画布上绘制,还需取得绘图上下文。 ``` JavaScript var drawing = document.getElementById("drawing"), //make sureis completely supported if (drawing.getContext){ var context = drawing.getContext("2d"); } ``` ## 2D 上下文 **填充和描边**:2D 上下文的两种基本绘图操作。 fillStyle 属性(填充):指定的样式(颜色、渐变或图像)填充图形; strokeStyle 属性(描边):只在图形边缘画线。 **绘制矩形**:矩形是唯一一种可以直接在 2D上下文中绘制的形状。 与矩形有关的方法包括fillRect()、strokeRect和clearRect()。 这三个方法都能接收4个参数:矩形的x坐标、矩形的y坐标、矩形的宽度和矩形高度。
Your browser doesn't support the canvas tag.
绘制矩形
html
1
<canvas id="drawing" width="200" height="100">Your browser doesn't support the canvas tag.</canvas>
javascript
1
2
3
4
5
6
7
8
9
var drawing = document.getElementById("drawing");
if (drawing.getContext){
var context = drawing.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(30, 30, 50, 50);
context.clearRect(40,40,10,10);
}

绘制路径

首先调用 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)。

Your browser doesn't support the canvas tag.
绘制路径和文本
html
1
<canvas id="drawing2" width="200" height="200">Your browser doesn't support the canvas tag.</canvas>
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var drawing = document.getElementById("drawing2");
if (drawing.getContext){
var context = drawing.getContext("2d");
context.beginPath();
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
context.moveTo(100,100);
context.lineTo(100, 15);
context.moveTo(100, 100);
context.lineTo(35, 100);
context.stroke();
if (context.strokeText){
context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12", 100, 20);
context.textAlign = "start";
context.fillText("12", 100, 40);
context.textAlign = "end";
context.fillText("12", 100, 60);
} else {
console.log("Your browser doesn't support the canvas text API.");
}
}

变换
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>

如果本文对您有所帮助,且您手头还很宽裕,欢迎打赏赞助我,以支付网站服务器和域名费用。 https://paypal.me/wshunli 您的鼓励与支持是我更新的最大动力,我会铭记于心,倾于博客。
本文链接:https://www.wshunli.com/posts/95a7e74a.html