Tải bản đầy đủ (.pdf) (30 trang)
  1. Trang chủ
    2. >>
  2. Công nghệ thông tin
    3. >>
  3. Lập trình web

Giao trinh DH FPT_Slide4

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.36 MB, 30 trang )

BËI 4
LËM VIỆC VỚI CçC THËNH PHẦN VIDEO, AUDIO,
CANVAS CỦA HTML5

CuuDuongThanCong.com

/>

NHẮC LẠI BËI TRƯỚC
!
!
!
!

  Tổng quan về Javascript vˆ Jquery
  Lˆm việc với Javascript
  Lˆm việc với thư viện Jquery
  Học Javascript, jQuery với w3schools

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

2

/>

MỤC TIæU BËI HỌC
!
!
!


!

  Ch•n c‡c thˆnh phần video, audio vˆo trang
  iều khiển video với Javascript
  Lˆm quen với thˆnh phần canvas
  Sử dụng thˆnh phần cavas để thực hiện:
!   Vẽ h“nh vˆ đường
!   çp dụng mˆu vˆ cọ fradient
!   Thực hiện tạo h“nh động

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

3

/>

THËNH PHẦN VIDEO, AUDIO TRONG
HTML5

CuuDuongThanCong.com

/>

THËNH PHẦN VIDEO, AUDIO TRONG HTML5

!   Tại sao phải th•m video, ‰m thanh vˆo trang web?
!   Tạo n•n trang web hấp dẫn
!   Thu hœt sự truy cập của người duyệt với website

!   Lˆ một c‡ch tiếp cận người d•ng

!   Trước khi c— HTML5, lˆm c‡ch nˆo để ch•n video,
‰m thanh vˆo trang web?
!   Phải sử dụng plug-ins của c‡c c™ng ty thứ 3 (third
party)

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

5

/>

THËNH PHẦN VIDEO, AUDIO TRONG HTML5

!   HTML5 ch•n video, ‰m thanh vˆo trang web như thế
nˆo?
!   Cung cấp thˆnh phần HTML video chạy trong tr“nh
duyệt
!   T’ch hợp th•m với Javascript
!   C‰u lệnh:
<video src= video/BigBuck.ogg autoplay></video>

!   Autoplay: thuộc t’nh quy định với tr“nh duyệt oạn
video sẽ được chơi ngay khi trang được load

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5


CuuDuongThanCong.com

6

/>

THËNH PHẦN VIDEO, AUDIO TRONG HTML5

!   HTML5 cung cấp th•m c‡c iều khiển cho video:

solid #c3c3c3; ></canvas>

!   Kết hợp vẽ với Javascript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

16

/>

CANVAS
var ctx=c.getContext("2d");

!   Đối tượng getContext( 2d ) lˆ đối tượng HTML5
chứa c‡c phương thức vẽ đường path, h“nh hộp,
h“nh tr˜n, character, h“nh ảnh, v.vÉ.
ctx.fillStyle="#FF0000 ;

!   Định ngh a kiểu mˆu t™ lˆ mˆu đỏ
ctx.fillRect(0,0,150,75);

!   Định ngh a vẽ một h“nh chữ nhật k’ch thước

150x75, bắt đầu từ g—c tr•n b•n tr‡i (0,0)
Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

17

/>

CANVAS
!   Ưu iểm của thˆnh phần Canvas:
!   Cho phŽp tạo graphic, h“nh động (animation),
gradient, c‡c đối tượng đồ họa kh‡c bằng m‹
!   ‹ được c‡c tr“nh duyệt phổ biến hỗ trợ
!   Khả n ng mạnh mẽ: lˆm game, animation, chart,
graph, vector, É
!   Kh™ng phải sử dụng th•m plugin

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

18

/>

CANVAS
!   Vẽ đường path:
!   Đường path: tạo n•n c‡c h“nh dạng cơ sở
Hình 

chữ 
nhật 

Đường 
cong 

path 

Đường 
thẳng 

Hình 
tròn 
Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

19

/>

CANVAS
!   Vẽ h“nh chữ nhật:
.fillStyle()
.fillRect(x,y, width, height)
.strokeStyle()
.strokeRect(x, y, width, height)

!   X,y: tọa độ vẽ h“nh
!   Width, height: k’ch thước h“nh


Tọa độ x,y trên màn hình 

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

20

/>

CANVAS
!   Vẽ h“nh chữ nhật:
function setup() {
var canvas = document.getElementById('lessonCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'rgb(255, 0, 0)';
ctx.strokeRect(0.5, 0.5, 100, 100);}
}

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

21

/>

CANVAS

!   Vẽ đường thẳng:
ctx.strokeRect(0, 0, 300, 300);
ctx.moveTo(20, 20);
ctx.lineTo(100, 100);
ctx.lineTo(80, 200);
ctx.lineTo(200, 80);
ctx.lineTo(200, 200);
ctx.lineTo(280, 280);
ctx.stroke();

moveTo(x, y) 

Tạo ra một đường path phụ với tọa độ xác định 

lineTo (x,y) 

Thêm điểm point mới, kết nối với điểm trước đó bằng đường 
thẳng 

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

22

/>

CANVAS
!   Vẽ đường tr˜n:
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(70,18,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>

Arc(x,y, bán kính ,  2 пr) 

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

23

/>

CANVAS
!   Vẽ đường cong:
ctx.fillStyle = 'rgb(0,173,104)';
ctx.moveTo(145, 150);
ctx.quadraticCurveTo(120, 200, 170, 280);
ctx.lineTo(190, 280);
ctx.quadraticCurveTo(125, 190, 155, 150);
ctx.fill();
var pt1 = { x: 155, y: 145 };
var pt2 = { x: 93, y: 106 };
var cp1 = { x: 111, y: 154 };

var cp2 = { x: 4, y: 131 };

quadraΥcCurveTo(cpx, cpy, x, y) 
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 
Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

24

/>

CANVAS
!   Vẽ text:
ctx.font = "bold 1.8em sans-serif";
ctx.fillText(text,x,y,maxWidth);

ctx.font = "bold 1.8em 
sans‐serif"; 
ctx.fillText('HELLO MY 
NAME IS', 12, 40); 

Slide 4 - Lˆm việc với c‡c thˆnh phần video, audio, canvas của HTML5

CuuDuongThanCong.com

25

/>


Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay
×