Dùng Canvas vẽ bất cứ cái gì ta muốn

Canvas là gì?

<canvas> trong HTML được sử dụng để vẽ các hình ảnh, đồ hoạ trong trang web. <canvas> được sử dụng đồ hoạ một cách nhanh chóng, thông qua javascript. <canvas> có một số phương pháp để vẽ đường line, hộp, hình tròn, text và thêm hình ảnh.

`
<canvas id="myCanvas" width="200" height="100"></canvas>
`
- Ở đây atribute id (được tham chiếu trong script) và atribute width và height để xác định kích thước của canvas( chiều dài và rộng). 

Sử dụng javascript để làm canvas

• Đầu tiên chúng ta xây dựng html canvas

<canvas id="canvas"></canvas>

• Trong file js chúng ta đầu tiên là: ta dùng addEventListner để load page DOMContentLoaded thì gọi hàm init như đoạn code dưới đây

// Đây là đoạn cả page load xong html thì ta gọi hảm init
document.addEventListener('DOMContentLoaded', init);

Tại function init( khởi tạo) chúng ta làm như sau :

// function khởi tạo
function init() {
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red'; // set màu cho canvas
  ctx.fillRect(0, 0, 280, 280);
  canvas.addEventListener('mousedown', getPos); // nhấn chuột thì gọi đến hàm set position
  canvas.addEventListener('mousemove', draw); // di chuột thì gọi đến hàm vẽ
}

Khi ta nhấn chuột thì chúng ta pải lấy dc vị trí của con chuột ta set đến hàm position đầu tiên ta tạo object pos xét vị trí cho nó là 0

let pos = {x:0, y:0};
// function set vị trí của con chuột
function getPos(e) {
  pos.x = e.clientX - canvas.getBoundingClientRect().left; // lấy vị trí chuột khi chạm vào trên trục  x
  pos.y = e.clientY - canvas.getBoundingClientRect().top;  // lấy vị trí chuột khi chạm vào trên trục y
  console.log(pos.y , pos.x);
}

• khi ta di chuyển chuột thì sẽ vẽ lên những đường mà ta di chuyển thì ta gọi hàm draw như sau

//function vẽ
function draw(e) {
  if(e.buttons != 1) return;  // bỏ vẽ khi vừa đặt chuột
  ctx.beginPath(); // bắt đầu một đoạn line
  ctx.lineWidth = 18; // độ rộng nét vẽ
  ctx.lineCap = 'round'; // nét vẽ hình tròn
  ctx.strokeStyle = 'white'; // màu nét vẽ trắng
  ctx.moveTo(pos.x, pos.y); // di chuyển đến vị trí con chuột
  getPos(e); //tại mỗi vị trí lại set lại vị trí
  ctx.lineTo(pos.x, pos.y); //vẽ đến vị trí muốn vẽ
  ctx.stroke();
}

LINk Demo: https://codepen.io/ngc-yn/pen/abmQmmJ

Kết Luận

• Ở link demo mình đã ghi chi tiết từng bước làm. Mọi người flow theo link demo nhé
• Một thư viện rất hay của javascript tensorflow về machine language rất hay mình đã sử dụng đã xuất ra ảnh ở div#canvas-img. Các bạn có thể tìm hiểu thêm về nó