Canvas là phần tử mới xuất hiện trong HTML5, việc hiểu rõ và sử dụng canvas sẽ giúp các bạn có thể viết được nhiều ứng dụng như games. Trong bài viết này, chúng ta sẽ tạo một ứng dụng nhỏ đơn giản về HTML5 Canvas. Với ứng dụng này, các bạn có thể lấy mã màu theo HEX và RGB mà chúng ta thường gọi với cái tên là ” Color Picker “.
Xem Demo | Download
HTML
Tất cả phần tử html cần cho ứng dụng này là một phần tử canvas và các thẻ input cho việc hiển thị mã màu như sau :
1 2 3 | canvas awidth="600" height="440" id="canvas_picker"/canvasdiv id="hex"HEX: input type="text"/input/divdiv id="rgb"RGB: input type="text"/input/div |
JavaScript
Đầu tiên chúng ta cần khai báo biến canvas như sau :
1 | var canvas = document.getElementById('canvas_picker').getContext('2d'); |
Kế tiếp chúng ta sẽ ấn định hình nền cho canvas như sau :
1 2 3 4 5 | var img = new Image();img.src = 'image.jpg';$(img).load(function(){ canvas.drawImage(img,0,0);}); |
Kế đến, chúng ta sẽ cần lấy vị trí của con trỏ chuột khi chúng ta click vào canvas.
1 2 3 | $('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop; |
Và chúng ta sẽ lấy những mã màu từ các vị trí con trỏ chuột như sau :
1 2 3 4 | var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2]; |
Bây giờ chúng ta sẽ lưu trữ những giá trị R, G và B vào chung một biến RGB và hiển thị nó vào các trường input.
1 2 3 | var rgb = R + ',' + G + ',' + B; $('#rgb input').val(rgb);}); |
Kế tiếp là chúng ta sẽ viết thêm 2 hàm chuyển đổi giá trị RGB sang giá trị HEX
1 2 3 4 5 6 | function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}function toHex(n) { n = parseInt(n,10); if (isNaN(n)) return "00"; n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);} |
Full Code
Mình xin tổng hợp lại toàn bộ đoạn code cần thiết cho việc viết ứng dụng color picker như sau :
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | !DOCTYPE htmlhtml lang="en"head meta charset="utf-8" / titleColorpicker demo/title/headbodycanvas awidth="600" height="440" id="canvas_picker"/canvasdiv id="hex"HEX: input type="text"/input/divdiv id="rgb"RGB: input type="text"/input/divscript type="text/javascript" var canvas = document.getElementById('canvas_picker').getContext('2d'); // create an image object and get it’s source var img = new Image(); img.src = 'image.jpg'; // copy the image to the canvas $(img).load(function(){ canvas.drawImage(img,0,0); }); function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)} function toHex(n) { n = parseInt(n,10); if (isNaN(n)) return "00"; n = Math.max(0,Math.min(n,255)); return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16); } $('#canvas_picker').click(function(event){ // getting user coordinates var x = event.pageX - this.offsetLeft; var y = event.pageY - this.offsetTop; // getting image data and RGB values var img_data = canvas.getImageData(x, y, 1, 1).data; var R = img_data[0]; var G = img_data[1]; var B = img_data[2]; var rgb = R + ',' + G + ',' + B; // convert RGB to HEX var hex = rgbToHex(R,G,B); // making the color the value of the input $('#rgb input').val(rgb); $('#hex input').val('#' + hex); });/script/body/html |
Mình hy vọng qua ứng dụng đơn giản này, các bạn có thể hiểu và sử dụng canvas tốt hơn cho những ứng dụng của riêng mình.
