Lập trình phần mềm vẽ luôn là một đề tài được đa số các bạn IT muốn làm, bởi vì nó khá là thú vị. Hiểu đơn giản là nó giống như phần mềm paint trên Windows, người dùng có thể chọn kích thước, độ dày của bút, chọn màu sắc của bút và có thể vẽ tự do lên đấy.
Ok trong bài viết đầu tiên về Series nghịch ngợm của mình, mình sẽ hướng dẫn làm một trang web cho phép chọn màu sắc của bút và vẽ tự do lên đấy bằng HTML và JAVASCRIPT thuần
))) 
Để có thể hiểu rõ hơn thì các bạn nên có kiến thức nền về JS và Canvas. Mình sẽ cố gắng diễn giải cho các bạn dễ hiểu nhất. Toàn bộ source code mình sẽ để ở dưới bài viết nhé. Bạn có thể tải về và xem. Lưu ý là không nên "copy & paste" mà cố gắng đọc hiểu nhé. Ok chúng ta bắt đầu nhé
Tìm hiểu về cách thức hoạt động
Đường nét ngoằn ngoèo phức tạp của người dùng khi vẽ tự do là rất khó để biểu diễn bằng công thức toán học, đa phần là các bố vẽ linh tinh nhăng cuội. Để giải quyết vấn đề này, chúng ta xem đường nét đó là tập hợp của vô số đường thẳng vô cùng ngắn, nối tiếp nhau. Theo cách hiểu trên, hành động vẽ tự do bằng chuột có thể miêu tả như sau:
- Khi người dùng bấm chuột và chưa thả tay (mouse down), chúng ta lưu lại vị trí hiện tại và đặt biến drawing = true để xác định trạng thái bắt đầu vẽ.
- Người dùng đang giữ chuột, di chuột qua vị trí khác (mouse move), ta vẽ liên tục các đường thẳng từ vị trí cũ đến vị trí mới.
- Khi người dùng thả tay (mouse up) đặt biến drawing = false để không tiếp tục vẽ nữa.
Bước 1: Cài đặt
Ok đầu tiên khởi tạo 1 project. Bạn có thể download template ở đây. Sau khi tải về và giải nén sẽ được các file như sau:
- File index.html: Phần mềm sẽ chạy trên file này
- File draw.js: Nơi chứa code javascript để vẽ
Mở file draw.js lên ta khởi tạo một đối tượng canvas có kích thước 700x500 và append nó vào thẻ body, trong đó ta sẽ thêm cho nó một số thuộc tính cơ bản
JavaScript:
var draw = function(){
this.canvas = null;
this.context = null;
this.width = 700;
this.height = 500;
this.x = 0;
this.y = 0;
this.drawing = false;
this.lineWidth = 3;
this.color = "#000000"; // mặc định là màu đen
var self = this;
this.init = function(){
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
this.canvas.width = this.width;
this.canvas.height = this.height;
document.body.appendChild(this.canvas);
}
} JavaScript:
this.drawWhiteBackground = function(){
this.context.fillStyle = "#ffffff";
this.context.fillRect(0, 0, this.width, this.height);
} JavaScript:
this.drawLine = function(startX, startY, endX, endY){
this.context.beginPath();
this.context.moveTo(startX, startY);
this.context.lineTo(endX, endY);
this.context.lineWidth = this.lineWidth;
this.context.strokeStyle = this.color;
this.context.stroke();
} JavaScript:
this.getMousePosition = function(event){
var rect = this.canvas.getBoundingClientRect();
return {
x: event.clientX - rect.left,
y: event.clientY - rect.top
}
} JavaScript:
this.canvas.addEventListener('mousedown', function(event){
self.proccessMouseDown(event);
});
this.canvas.addEventListener('mouseup', function(event){
self.proccessMouseUp(event);
});
this.canvas.addEventListener('mousemove', function(event){
self.proccessMouseMove(event);
}); JavaScript:
this.processMouseDown = function(event){
var position = this.getMousePosition(event);
this.x = position.x;
this.y = position.y;
this.drawing = true; // bấm chuột xuống thì bắt đầu vẽ
} JavaScript:
this.proccessMouseUp = function(event){
this.drawing = false;
} JavaScript:
this.proccessMouseMove = function(event){
if (this.drawing){
var newPos = this.getMousePosition(event);
this.drawLine(this.x, this.y, newPos.x, newPos.y);
this.x = newPos.x;
this.y = newPos.y;
}
}