Slideshow với HTML5 canvas và jQuery


Đăng ký Quên mật khẩu?

Diễn đàn

Tài Liệu Sau Đại Học

CNTT

Chatbox

Các bạn vui lòng dùng từ ngữ lịch sự và có văn hóa,sử dụng Tiếng Việt có dấu chuẩn. Chúc các bạn vui vẻ!

19/08/2016 10:08 # 1

nhathung

Cấp độ: 30 - Kỹ năng: 5

Kinh nghiệm: 42/300 (14%)

Kĩ năng: 26/50 (52%)

Ngày gia nhập: 30/05/2015

Bài gởi: 4392

Được cảm ơn: 126

Slideshow với HTML5 canvas và jQuery

Phần tử canvas trong HTML5, giúp bạn dễ dàng tạo và thay đổi đồ họa trên website. Chúng ta có thể sử dụng canvas như mọi phần tử HTML khác, tức là có thể áp dụng các hiệu ứng của jQuery, kiểm tra các sự kiện, áp dụng vào trong layout...

Các bài hướng dẫn canvas trước đây thường về game hoặc hiệu ứng ảnh. Hôm nay bạn sẽ được học cách sử dụng canvas để tạo hiệu ứng cho jquery slideshow.

Ý tưởng

Sử dụng JavaScript, chúng ta sẽ áp dụng bộ lọc đặc biệt vào các ảnh trong slideshow. Chúng ta sẽ tạo một phiên bản mới của ảnh trong slideshow và lưu vào trong phần tử canvas. Khi người xem click để chuyển ảnh, canvas sẽ xuất hiện với hiệu ứng fadeIn.

Mã HTML

Trước tiên, bạn cần có file HTML, tạm đặt tên là html5-slideshow.html như sau:

			
							01
						
							<!DOCTYPE html>
					
							02
						
							<html>
					
							03
						
							04
						
							<head>
					
							05
						
							<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
					
							06
						
							<title>An HTML5 Slideshow w/ Canvas & jQuery | Tutorialzine Demo</title>
					
							07
						
							<link rel="stylesheet" type="text/css" href="styles.css" />
					
							08
						
							</head>
					
							09
						
							<body>
					
							10
						
							<div id="slideshow">
					
							11
						
							    <ul class="slides">
					
							12
						
							        <li><img src="img/photos/1.jpg" width="620" height="320" alt="Marsa Alam" /></li>
					
							13
						
							        <li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach" /></li>
					
							14
						
							        <li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station"/></li>
					
							15
						
							        <li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li>
					
							16
						
							    </ul>
					
							17
						
							18
						
							    <span class="arrow previous"></span>
					
							19
						
							    <span class="arrow next"></span>
					
							20
						
							</div>
					
							21
						
							22
						
							<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
					
							23
						
							<script src="script.js"></script>
					
							24
						
							</body>
					
							25
						
							</html>

Đây là kiểu khai báo doctype của HTML5, bạn có thể thấy nó hơi khác so với HTML4.1 hiện tại. Mã HTML cho slideshow rất đơn giản, tất cả nằm trong thẻ div#slideshow và mỗi ảnh nằm trong một phần tử li của unordered list.

Ở dưới chúng ta thêm jquery và script.js (phần cuối bài viết) để xử lý các hiệu ứng (bạn hoàn toàn có thể chuyển thẻ script này vào trong thẻ <head>).

Mã CSS

Tất cả các mã CSS được lưu vào style.css, ở đây tác giả sử dụng #slideshow trước các thuộc tính CSS khác. Việc này giúp bạn có thể gắn vào website của mình mà không lo bị xung đột.

			
							01
						
							#slideshow{
					
							02
						
							    background-color:#F5F5F5;
					
							03
						
							    border:1px solid #FFFFFF;
					
							04
						
							    height:340px;
					
							05
						
							    margin:150px auto 0;
					
							06
						
							    position:relative;
					
							07
						
							    width:640px;
					
							08
						
							09
						
							    -moz-box-shadow:0 0 22px #111;
					
							10
						
							    -webkit-box-shadow:0 0 22px #111;
					
							11
						
							    box-shadow:0 0 22px #111;
					
							12
						
							}
					
							13
						
							14
						
							#slideshow ul{
					
							15
						
							    height:320px;
					
							16
						
							    left:10px;
					
							17
						
							    list-style:none outside none;
					
							18
						
							    overflow:hidden;
					
							19
						
							    position:absolute;
					
							20
						
							    top:10px;
					
							21
						
							    width:620px;
					
							22
						
							}
					
							23
						
							24
						
							#slideshow li{
					
							25
						
							    position:absolute;
					
							26
						
							    display:none;
					
							27
						
							    z-index:10;
					
							28
						
							}
					
							29
						
							30
						
							#slideshow li:first-child{
					
							31
						
							    display:block;
					
							32
						
							    z-index:1000;
					
							33
						
							}
					
							34
						
							35
						
							#slideshow .slideActive{
					
							36
						
							    z-index:1000;
					
							37
						
							}
					
							38
						
							39
						
							#slideshow canvas{
					
							40
						
							    display:none;
					
							41
						
							    position:absolute;
					
							42
						
							    z-index:100;
					
							43
						
							}
					
							44
						
							45
						
							#slideshow .arrow{
					
							46
						
							    height:86px;
					
							47
						
							    width:60px;
					
							48
						
							    position:absolute;
					
							49
						
							    background:url('img/arrows.png') no-repeat;
					
							50
						
							    top:50%;
					
							51
						
							    margin-top:-43px;
					
							52
						
							    cursor:pointer;
					
							53
						
							    z-index:5000;
					
							54
						
							}
					
							55
						
							56
						
							#slideshow .previous{ background-position:left top;left:0;}
					
							57
						
							#slideshow .previous:hover{ background-position:left bottom;}
					
							58
						
							59
						
							#slideshow .next{ background-position:right top;right:0;}
					
							60
						
							#slideshow .next:hover{ background-position:right bottom;}

Chúng ta có thể chia thành 3 nhóm người xem slideshow như sau:

Người xem tắt JavaScript trên trình duyệt: chỉ nhìn thấy ảnh đầu tiên và không thể click sang ảnh tiếp theo.
Người xem bật JavaScript (mặc định), nhưng trình duyệt không hỗ trợ canvas: vẫn thấy slide chuyển động nhưng không đi kèm hiệu ứng.
Người xem bật JavaScript và sử dụng trình duyệt hỗ trợ canvas: thấy đầy đủ nhất hiệu ứng của slideshow (Các phiên bản mới nhất của Firefox, Safari, Chrome, Opera và IE9).

Với 2 nhóm đầu tiên, sử dụng cách chọn first-child để hiển thị slide đầu tiên và áp dụng thuộc tínhoverflow:hidden để che đi các phần khác.

Mã JavaScript

Cuối cùng là phần quan trọng nhất của bài hướng dẫn: mã Javascript và jQuery.

script.js – Phần 11

			
							01
						
							$(window).load(function(){
					
							02
						
							03
						
							    // Chờ sự kiện window.load, để biết chắc là ảnh đã tải xong.
					
							04
						
							05
						
							    // Kiểm tra xem trình duyệt có hỗ trợ canvas hay không:
					
							06
						
							    var supportCanvas = 'getContext' in document.createElement('canvas');
					
							07
						
							08
						
							    // sử dụng setTimeout giúp đồng bộ và cải thiện tốc độ đáp ứng của trang
					
							09
						
							    // (do canvas xử lý ảnh tốn tài nguyên máy tính)
					
							10
						
							11
						
							    setTimeout(function(){
					
							12
						
							13
						
							        if(supportCanvas){
					
							14
						
							            $('#slideshow img').each(function(){
					
							15
						
							16
						
							                // Tạo ảnh mới (được sửa từ ảnh gốc)
					
							17
						
							                createCanvasOverlay(this);
					
							18
						
							            });
					
							19
						
							        }
					
							20
						
							21
						
							        var slides = $('li'),
					
							22
						
							            current = 0;
					
							23
						
							24
						
							        $('#slideshow .arrow').click(function(){
					
							25
						
							            var li            = slides.eq(current),
					
							26
						
							                canvas        = li.find('canvas'),
					
							27
						
							                nextIndex    = 0;
					
							28
						
							29
						
							            // Tùy thuộc sự kiện là "next" hay "previous"
					
							30
						
							            // mà ta tính toán chỉ số của slide
					
							31
						
							32
						
							            if($(this).hasClass('next')){
					
							33
						
							                nextIndex = current >= slides.length-1 ? 0 : current+1;
					
							34
						
							            }
					
							35
						
							            else {
					
							36
						
							                nextIndex = current <= 0 ? slides.length-1 : current-1;
					
							37
						
							            }
					
							38
						
							39
						
							            var next = slides.eq(nextIndex);
					
							40
						
							41
						
							            if(supportCanvas){
					
							42
						
							43
						
							                // Trình duyệt hỗ trợ canvas, sử dụng fadeIn để hiển thị canvas
					
							44
						
							45
						
							                canvas.fadeIn(function(){
					
							46
						
							47
						
							                    // Hiển thị slide tiếp lên trên
					
							48
						
							                    next.show();
					
							49
						
							                    current = nextIndex;
					
							50
						
							51
						
							                    // fadeOut slide hiện tại
					
							52
						
							                    li.fadeOut(function(){
					
							53
						
							                        li.removeClass('slideActive');
					
							54
						
							                        canvas.hide();
					
							55
						
							                        next.addClass('slideActive');
					
							56
						
							                    });
					
							57
						
							                });
					
							58
						
							            }
					
							59
						
							            else {
					
							60
						
							61
						
							                // Nếu trình duyệt không hỗ trợ canvas
					
							62
						
							                // sử dụng show() và hide()
					
							63
						
							64
						
							                current=nextIndex;
					
							65
						
							                next.addClass('slideActive').show();
					
							66
						
							                li.removeClass('slideActive').hide();
					
							67
						
							            }
					
							68
						
							        });
					
							69
						
							70
						
							    },100);

Với document.createElement(), bạn có thể tạo bất kỳ phần từ DOM nào. Vì vậy để kiểm tra trình duyệt có hỗ trợ canvas hay không, bạn có thể sử dụng toán tử inđể kiểm tra phương thức getContext(). Kết quả của phép thử sẽ được dùng để kiểm tra trình duyệt có hỗ trợ canvas hay không.

Bạn cần chú ý là khi gọi hàm createCanvasOverlay chúng ta cần đặt vào trong setTimeout vì hàm này chạy khá nặng và có thể kiến trình duyệt bị treo (nếu cấu hình máy của bạn yếu). Và khi đó setTimeout sẽ giúp chia nhỏ thời gian xử lý giúp cải thiện tốc độ.

script.js – Phần 2

			
							01
						
							    // Hàm createCanvasOverlay sẽ lấy ảnh và xử lý
					
							02
						
							    // tạo phiên bản tương tự Overlay blending trong photoshop
					
							03
						
							04
						
							    function createCanvasOverlay(image){
					
							05
						
							06
						
							        var canvas            = document.createElement('canvas'),
					
							07
						
							            canvasContext    = canvas.getContext("2d");
					
							08
						
							09
						
							        // Đặt chiều rộng và cao bằng với kích thước ảnh
					
							10
						
							        canvas.width = image.width;
					
							11
						
							        canvas.height = image.height;
					
							12
						
							13
						
							        // Vẽ lại ảnh trên canvas:
					
							14
						
							        canvasContext.drawImage(image,0,0);
					
							15
						
							16
						
							        // Lấy các dữ liệu ảnh và lưu vào mảng imageData:
					
							17
						
							        var imageData    = canvasContext.getImageData(0,0,canvas.width,canvas.height),
					
							18
						
							            data        = imageData.data;
					
							19
						
							20
						
							        // Lặp trên từng pixel của ảnh và sửa các giá trị màu red, green và blue
					
							21
						
							22
						
							        for(var i = 0;i<imageData.height*imageData.width*4;i++){
					
							23
						
							24
						
							            // Các giá trị của màu red, green và blue là liên tục trong các phần tử
					
							25
						
							            // nên chúng ta sẽ xử lý cả 3 một lần trong mảng imageData
					
							26
						
							27
						
							            data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
					
							28
						
							                        (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
					
							29
						
							            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
					
							30
						
							                        (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
					
							31
						
							            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
					
							32
						
							                        (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
					
							33
						
							34
						
							            // Để nguyên giá trị alpha trong kênh màu RGB
					
							35
						
							            ++i;
					
							36
						
							        }
					
							37
						
							38
						
							        // Chuyển ảnh đã xử lý trở lại canvas
					
							39
						
							        canvasContext.putImageData(imageData,0,0,0,0,imageData.width,imageData.height);
					
							40
						
							41
						
							        // Đưa canvas vào DOM, bên trên ảnh
					
							42
						
							        image.parentNode.insertBefore(canvas,image);
					
							43
						
							    }
					
							44
						
							45
						
							});

Có thể nói hàm createCanvasOverlay là phần chính của bài hướng dẫn. Bạn có thể hiểu canvas là một tờ giấy trắng mà bạn có thể vẽ vào nhờ cái bút javascript. Đoạn mã trong hàm tạo một phần tử canvas trắng và đưa ảnh vào sử dụng phương thức drawImage(). Sau đó, chúng ta sử dụng tiếpgetImageData() để lấy từng điểm ảnh trong canvas vào mảng imageData.

Tiếp tục, với từng điểm ảnh chúng ta áp dụng bộ lọc đặc biệt (màu sáng thì sáng hơn và màu tối sẽ tối hơn) tương tự với chế độ overlay blending trong photoshop.

Vòng lặp for xử lý rất nhiều – với một bức ảnh 600×400 pixel sẽ phải có 240 000 lần lặp! Lý do đó bạn phải thực sự cẩn thận với đoạn mã, sao cho nó nhẹ nhất có thể, cũng vì vậy tác giả copy công thức 3 lần thay vì chuyển nó vào hàm. Việc này giúp vòng lặp chạy nhanh gấp ba lần.

ntuts.com

Các thành viên đã Thank nhathung vì Bài viết có ích:

16/11/2016 15:11 # 2

tpoplayerone

Cấp độ: 2 - Kỹ năng: 1

Kinh nghiệm: 16/20 (80%)

Kĩ năng: 0/10 (0%)

Ngày gia nhập: 20/10/2015

Bài gởi: 26

Được cảm ơn: 0

Phản hồi: Slideshow với HTML5 canvas và jQuery

tks thớt nhé

---------------------------

Có ai biết mua tinh chất hàu tươi ở đâu hay con hàu có tác dụng gì và làm cách nào giúp tăng cường sinh lý không?

Các thành viên đã Thank tpoplayerone vì Bài viết có ích:

Trả lời nhanh
Các bạn vui lòng dùng từ ngữ lịch sự và có văn hóa,sử dụng Tiếng Việt có dấu chuẩn. Biểu tượng vui Tùy chọn Hiển thị chữ ký Trích thông tin khi trả lời?