Skip to content

Commit 5d9457e

Browse files
zhaowenbozhaowenbo
zhaowenbo
authored and
zhaowenbo
committed
update content
1 parent 76987d5 commit 5d9457e

File tree

11 files changed

+523
-86
lines changed

11 files changed

+523
-86
lines changed

‎content/html5/canvas.md

+116-43
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
### Canvas是什么？
66

7-
* HTML5绘图元素
7+
* HTML5新增的一个绘图元素
88
* 使用JavaScript控制图形绘制
99
* 可绘制路径、矩形、圆形、字符以及添加图像等
1010

@@ -26,32 +26,27 @@
2626

2727
### 坐标系
2828

29-
* 笛卡尔坐标
30-
* 左上角为原点 (0,0)
31-
* x轴向右，y轴向下
29+
<img src="img/html5/axis.jpg">
3230

3331
---
3432

3533
### 矩形
3634

37-
```javascript
38-
var canvas = document.getElementById('canvas');
39-
if (canvas.getContext) {
40-
var ctx = canvas.getContext('2d');
41-
42-
ctx.fillRect(25,25,100,100);
43-
ctx.clearRect(45,45,60,60);
44-
ctx.strokeRect(50,50,50,50);
45-
}
46-
```
35+
* cxt.fillRect(x, y, w, h);
36+
* cxt.clearRect(x, y, w, h);
37+
* cxt.strokeRect(x, y, w, h);
38+
39+
---
40+
41+
<iframe src="http://jsbin.com/vamewa/1/embed?js,output" frameborder="0" width="800" height="600"></iframe>
4742

4843
---
4944

5045
### 路径
5146

5247
* beginPath() 开始路径绘制
53-
* moveTo() 移动到指定位置
54-
* lineTo() 从当前位置绘制直线到指定位置
48+
* moveTo(x, y) 移动到指定位置
49+
* lineTo(x, y) 从当前位置绘制直线到指定位置
5550
* closePath() 结束路径
5651
* stroke() 描边
5752
* fill() 填充
@@ -60,43 +55,121 @@ if (canvas.getContext) {
6055

6156
### 画个三角形
6257

58+
<iframe src="http://jsbin.com/tozire/1/embed?js,output" frameborder="0" width="800" height="600"></iframe>
59+
60+
---
61+
62+
### 曲线
63+
6364
```javascript
64-
var canvas = document.getElementById('canvas');
65-
if (canvas.getContext){
66-
var ctx = canvas.getContext('2d');
67-
68-
ctx.beginPath();
69-
ctx.moveTo(75,50);
70-
ctx.lineTo(100,75);
71-
ctx.lineTo(100,25);
72-
ctx.fill();
73-
}
65+
// 圆弧
66+
arc(x, y, radius, startAngle, endAngle, anticlockwise)
67+
// 二次贝塞尔曲线
68+
quadraticCurveTo(cp1x, cp1y, x, y)
69+
// 三次贝塞尔曲线
70+
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
7471
```
7572

7673
---
7774

78-
### 曲线
75+
### 贝塞尔曲线
76+
77+
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/B%C3%A9zier_2_big.gif" width="800">
78+
79+
---
80+
81+
### 二阶贝塞尔曲线
82+
83+
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/B%C3%A9zier_2_big.svg" style="background:#fff" width="800">
84+
85+
---
86+
87+
### 三阶贝塞尔曲线
88+
89+
<img src="https://upload.wikimedia.org/wikipedia/commons/d/db/B%C3%A9zier_3_big.gif" width="800">
7990

80-
* arc(x, y, radius, startAngle, endAngle, anticlockwise) 圆弧
81-
* quadraticCurveTo(cp1x, cp1y, x, y) 二次贝塞尔曲线
82-
* bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 三次贝塞尔曲线
8391

8492
---
8593

8694
### 绘制心形
8795

96+
<iframe src="http://jsbin.com/guwitu/1/embed?js,output" frameborder="0" width="800" height="600"></iframe>
97+
98+
---
99+
100+
### 显示文字
101+
102+
* fillText(text, x, y, maxWidth)
103+
* strokeText(text, x, y, maxWidth)
104+
* 文本样式控制
105+
* font = "48px Arial"
106+
* textAlign = "left"
107+
* measureText(text)
108+
109+
---
110+
111+
### Demo
112+
113+
<iframe src="http://jsbin.com/keguqu/2/embed?js,output" frameborder="0" width="800" height="600"></iframe>
114+
115+
---
116+
117+
### 使用图片
118+
88119
```javascript
89-
var canvas = document.getElementById('canvas');
90-
if (canvas.getContext){
91-
var ctx = canvas.getContext('2d');
92-
ctx.beginPath();
93-
ctx.moveTo(75,40);
94-
ctx.bezierCurveTo(75,37,70,25,50,25);
95-
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
96-
ctx.bezierCurveTo(20,80,40,102,75,120);
97-
ctx.bezierCurveTo(110,102,130,80,130,62.5);
98-
ctx.bezierCurveTo(130,62.5,130,25,100,25);
99-
ctx.bezierCurveTo(85,25,75,37,75,40);
100-
ctx.fill();
101-
}
120+
drawImage(
121+
image,
122+
sx, sy, sWidth, sHeight, // 原图
123+
dx, dy, dWidth, dHeight // 绘制到Canvas
124+
)
102125
```
126+
127+
---
128+
129+
### Demo
130+
131+
<iframe src="http://jsbin.com/kadami/8/embed?js,output" frameborder="0" width="800" height="600"></iframe>
132+
133+
---
134+
135+
### 变换
136+
137+
* 对画布进行变换
138+
* translate(x, y)
139+
* scale(x, y)
140+
* rotate(angle)
141+
* save()
142+
* restore()
143+
144+
---
145+
146+
<iframe src="http://jsbin.com/hiqoto/3/embed?js,output" frameborder="0" width="800" height="600"></iframe>
147+
148+
---
149+
150+
### 动画
151+
152+
<iframe src="http://jsbin.com/tilawuv/2/embed?js,output" frameborder="0" width="800" height="600"></iframe>
153+
154+
---
155+
156+
### 事件绑定
157+
158+
* 只能绑定在canvas元素上
159+
* 通过事件发生的坐标，判断发生在哪个图形上
160+
161+
---
162+
163+
### Canvas 使用场景
164+
165+
* 对性能要求
166+
* 图形交互较少
167+
168+
---
169+
170+
@state: green
171+
172+
<p style="font-size:6em"><i class="fa fa-comments"></i></p>
173+
174+
175+

‎content/html5/geolocation.md

+33-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
### get current position
1414

1515
```javascript
16-
navigator.getCurrentPosition(function(pos){
16+
navigator.geolocation.getCurrentPosition(function(pos){
1717
console.log(pos);
1818
}, function(err){
1919
console.log(err);
@@ -37,3 +37,35 @@ navigator.getCurrentPosition(function(pos){
3737
* 持续跟踪设备位置的改变
3838
* navigator.geolocation.watchPosition
3939
* navigator.geolocation.clearWatch
40+
41+
---
42+
43+
### 经纬度 --> 地址
44+
45+
* 逆向地理编码API
46+
47+
---
48+
49+
### Geolocation使用注意事项
50+
51+
* 用户授权过程必不可少
52+
* 定位速度比较慢
53+
* Google服务不稳定
54+
55+
---
56+
57+
### 兼容性
58+
59+
* IE9+
60+
* Firefox
61+
* Chrome
62+
* iOS
63+
* Android
64+
65+
---
66+
67+
@state: green
68+
69+
<p style="font-size:6em"><i class="fa fa-comments"></i></p>
70+
71+

‎content/html5/html5-overview.md

+6
Original file line numberDiff line numberDiff line change
@@ -129,3 +129,9 @@ table.html5 td {
129129
* bug
130130
* [StackOverflow](http://stackoverflow.com/)
131131
* [Android Bug List](https://code.google.com/p/android/issues/list)
132+
133+
---
134+
135+
@state: green
136+
137+
<p style="font-size:6em"><i class="fa fa-comments"></i></p>

‎content/html5/multimedia.md

+41-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## Video 和 audio
1+
## Video 和 Audio
22

33
---
44

@@ -13,7 +13,10 @@
1313
### 引入
1414

1515
```markup
16-
<video width="320" height="240" controls="controls">
16+
<video width="320" height="240" src="movie.ogg">
17+
</video>
18+
19+
<video width="320" height="240" controls>
1720
<source src="movie.ogg" type="video/ogg">
1821
<source src="movie.mp4" type="video/mp4">
1922
</video>
@@ -32,7 +35,7 @@
3235

3336
### 视频格式
3437

35-
<table class="dataintable">
38+
<table style="margin: 0 auto" width="900">
3639
<tbody><tr>
3740
<th>格式</th>
3841
<th style="width:16%">IE</th>
@@ -72,8 +75,11 @@
7275

7376
---
7477

78+
<video src="http://www.runoob.com/try/demo_source/movie.ogg" controls preload width="600"></video>
79+
80+
---
7581

76-
### JavaScript控制
82+
### [JavaScript控制](/demos/html5/video.html)
7783

7884
```javascript
7985
var v = document.getElementById('video');
@@ -88,13 +94,42 @@ v.load();
8894

8995
* play
9096
* pause
91-
* playing
9297
* waiting
9398
* seeking
9499
* timeupdate
95100

96101
---
97102

103+
### Video与Canvas结合
104+
105+
* drawImage(video, 0, 0, w, h)
106+
* [demo](http://html5doctor.com/demos/video-canvas-magic/demo1.html)
107+
108+
---
109+
98110
### Audio
99111

100-
* 和video类似
112+
```markup
113+
<audio src="music.ogg">
114+
</audio>
115+
116+
<audio controls>
117+
<source src="music.ogg" type="audio/ogg">
118+
<source src="music.mp3" type="audio/mp3">
119+
</audio>
120+
```
121+
122+
---
123+
124+
### Web Audio API
125+
126+
* [API](https://webaudio.github.io/web-audio-api/)
127+
* [Demo](http://mdn.github.io/violent-theremin/)
128+
129+
---
130+
131+
132+
@state: green
133+
134+
<p style="font-size:6em"><i class="fa fa-comments"></i></p>
135+

0 commit comments

Comments
 (0)