Vẽ đồ họa bằng Canvas trong HTML JavaScript

lineWidth

lineWidth: Thuộc tính xác định độ dày của đường viền khi vẽ.

ctx.lineWidth = 10;  // Đặt độ dày đường viền là 10px
ctx.strokeRect(50, 50, 200, 100);  // Vẽ hình chữ nhật với đường viền dày

Hệ màu

Bạn có thể sử dụng nhiều cách khác nhau để chỉ định màu sắc:

• Tên màu: red, blue, green, ...

• Mã màu Hex: #ff0000 (màu đỏ), #0000ff (màu xanh dương).

• Mã màu RGB: rgb(255, 0, 0) (màu đỏ).

• Mã màu RGBA: rgba(255, 0, 0, 0.5) (màu đỏ với độ trong suốt 50%).

ctx.fillStyle = 'rgb(255, 0, 0)';  // Màu đỏ
ctx.fillRect(100, 100, 200, 100);

Text

Vẽ văn bản là một trong những tính năng mạnh mẽ của Canvas. Bạn có thể vẽ chữ và tùy chỉnh các thuộc tính của văn bản như font, căn chỉnh, v.v.

fillText() và strokeText()

• fillText(text, x, y): Vẽ văn bản với màu sắc (fill) tại vị trí (x, y).

ctx.font = '30px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 50, 50);  // Vẽ chữ "Hello Canvas" tại vị trí (50, 50)

strokeText(text, x, y): Vẽ văn bản với đường viền (stroke).

ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.strokeText('Hello Canvas', 50, 100);  // Vẽ chữ "Hello Canvas" với viền màu xanh

Căn chỉnh văn bản

• textAlign: Thuộc tính xác định cách căn chỉnh văn bản (left, center, right).

ctx.textAlign = 'center';  // Căn giữa văn bản
ctx.fillText('Centered Text', 250, 150);  // Vẽ văn bản căn giữa

textBaseline: Thuộc tính xác định căn chỉnh theo chiều dọc (top, middle, bottom).

ctx.textBaseline = 'middle';  // Căn chỉnh theo chiều dọc giữa
ctx.fillText('Middle-aligned', 250, 150);

Font

• font: Thuộc tính xác định kiểu chữ và kích thước văn bản.

ctx.font = '30px Arial';  // Đặt font là Arial với kích thước 30px
ctx.fillText('Styled Text', 50, 200);

Các thao tác trên giúp bạn tạo ra những hình ảnh, biểu đồ, hoặc các đối tượng đồ họa động phức tạp khi kết hợp với các kỹ thuật vẽ khác trong Canvas API.

Tương tác và thao tác nâng cao JavaScript

Trong Canvas API, bạn có thể tạo ra các tương tác nâng cao với người dùng thông qua việc xử lý các sự kiện chuột, giúp tạo ra các ứng dụng vẽ hoặc trò chơi trực quan. Phần này sẽ giải thích cách bắt sự kiện chuột, lấy tọa độ chuột, và tạo ứng dụng vẽ đơn giản (paint app) cơ bản.

Xử lý chuột

Để xử lý các sự kiện chuột trong Canvas, bạn có thể sử dụng các sự kiện JavaScript như mousedown, mousemove, và mouseup. Các sự kiện này sẽ cho phép bạn nhận diện khi nào người dùng nhấn chuột, di chuyển chuột, và nhả chuột trên Canvas.

Bắt sự kiện chuột

• mousedown: Sự kiện này được kích hoạt khi người dùng nhấn nút chuột.

• mousemove: Sự kiện này được kích hoạt khi người dùng di chuyển chuột.

• mouseup: Sự kiện này được kích hoạt khi người dùng thả nút chuột.

Để bắt các sự kiện này, bạn cần sử dụng addEventListener() để lắng nghe các sự kiện và thực hiện hành động khi chúng xảy ra.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

// Lắng nghe sự kiện mousedown (nhấn chuột)
canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  ctx.beginPath();  // Bắt đầu một đường vẽ mới
  ctx.moveTo(getMousePosition(e).x, getMousePosition(e).y);  // Di chuyển con trỏ đến vị trí chuột
});

// Lắng nghe sự kiện mousemove (di chuyển chuột)
canvas.addEventListener('mousemove', (e) => {
  if (isDrawing) {
    const mousePos = getMousePosition(e);
    ctx.lineTo(mousePos.x, mousePos.y);  // Vẽ đường thẳng đến vị trí chuột
    ctx.stroke();  // Vẽ đường viền
  }
});

// Lắng nghe sự kiện mouseup (thả chuột)
canvas.addEventListener('mouseup', () => {
  isDrawing = false;  // Dừng vẽ khi thả chuột
});

// Lấy tọa độ chuột trong canvas
function getMousePosition(e) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };
}

Trong ví dụ trên:

• mousedown bắt đầu một đường vẽ mới khi người dùng nhấn chuột.

• mousemove vẽ đường liên tục khi người dùng di chuyển chuột.

• mouseup kết thúc quá trình vẽ khi người dùng thả chuột.

Lấy tọa độ chuột trên canvas

Để lấy tọa độ chuột trên canvas, bạn cần tính toán vị trí của chuột trong canvas so với vị trí của cửa sổ trình duyệt. Để làm điều này, bạn có thể sử dụng phương thức getBoundingClientRect() của Canvas để xác định vị trí và kích thước của phần tử trên trang, sau đó tính toán tọa độ thực tế của chuột.

function getMousePosition(e) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: e.clientX - rect.left,  // Tính toán vị trí X
    y: e.clientY - rect.top    // Tính toán vị trí Y
  };
}

Với hàm getMousePosition(), bạn sẽ nhận được tọa độ (x, y) của chuột trong không gian của Canvas.

Vẽ tự do (Paint App cơ bản)

Ứng dụng vẽ cơ bản cho phép người dùng sử dụng chuột để vẽ các đường tự do trên Canvas. Bạn có thể cung cấp các chức năng như chọn màu vẽ, thay đổi kích thước nét vẽ, và xóa phần vẽ.

Chức năng vẽ tự do

Người dùng có thể vẽ trên canvas bằng cách giữ chuột và di chuyển chuột. Mỗi khi người dùng di chuyển chuột, ứng dụng sẽ vẽ một đường liền mạch từ điểm hiện tại đến vị trí chuột.

let isDrawing = false;
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const clearButton = document.getElementById('clearButton');
const colorPicker = document.getElementById('colorPicker');
const sizePicker = document.getElementById('sizePicker');

let currentColor = 'black';  // Màu mặc định
let currentSize = 5;  // Kích thước nét vẽ mặc định

// Lắng nghe sự kiện nhấn chuột để bắt đầu vẽ
canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(getMousePosition(e).x, getMousePosition(e).y);
});

// Lắng nghe sự kiện di chuyển chuột để vẽ đường
canvas.addEventListener('mousemove', (e) => {
  if (isDrawing) {
    const mousePos = getMousePosition(e);
    ctx.lineTo(mousePos.x, mousePos.y);
    ctx.stroke();
  }
});

// Lắng nghe sự kiện thả chuột để kết thúc vẽ
canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});

// Xóa canvas
clearButton.addEventListener('click', () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // Xóa toàn bộ nội dung canvas
});

// Chọn màu
colorPicker.addEventListener('input', (e) => {
  currentColor = e.target.value;  // Cập nhật màu sắc khi người dùng chọn
  ctx.strokeStyle = currentColor;
  ctx.fillStyle = currentColor;
});

// Chọn kích thước nét vẽ
sizePicker.addEventListener('input', (e) => {
  currentSize = e.target.value;  // Cập nhật kích thước nét vẽ
  ctx.lineWidth = currentSize;
});

Trong ví dụ trên:

• Người dùng có thể vẽ tự do trên canvas bằng chuột.

• clearButton cho phép người dùng xóa toàn bộ nội dung vẽ trên canvas.

• colorPicker cho phép người dùng chọn màu vẽ từ một bảng màu.

• sizePicker cho phép người dùng thay đổi kích thước nét vẽ.

Chức năng lưu ảnh hoặc xóa nội dung

Bạn có thể thêm một nút để lưu nội dung vẽ thành một bức ảnh và một nút để xóa toàn bộ nội dung canvas.

// Lưu ảnh vẽ
function saveDrawing() {
  const dataURL = canvas.toDataURL();  // Chuyển canvas thành chuỗi hình ảnh (data URL)
  const link = document.createElement('a');
  link.href = dataURL;
  link.download = 'drawing.png';  // Tải xuống hình ảnh
  link.click();
}

const saveButton = document.getElementById('saveButton');
saveButton.addEventListener('click', saveDrawing);  // Lắng nghe sự kiện nhấn nút lưu

Lưu ý: canvas.toDataURL() sẽ chuyển nội dung của canvas thành chuỗi base64, có thể dùng để tải xuống như một file ảnh.

Hiệu ứng nâng cao với Canvas JavaScript

Canvas không chỉ giúp vẽ các hình dạng cơ bản mà còn hỗ trợ các hiệu ứng nâng cao như gradient, pattern, xử lý ảnh và tạo hoạt ảnh. Những hiệu ứng này có thể giúp bạn tạo ra các ứng dụng đồ họa phong phú hơn, bao gồm cả game 2D và ứng dụng xử lý ảnh. Phần này sẽ đi sâu vào cách tạo gradient, pattern, làm việc với ảnh, và sử dụng requestAnimationFrame() để tạo hiệu ứng hoạt ảnh.

Gradient và Pattern

Gradient và Pattern là các kỹ thuật phổ biến để tạo ra các hiệu ứng màu sắc phong phú và đẹp mắt. Canvas API cung cấp các phương thức để tạo gradient tuyến tính và radial, cũng như để vẽ pattern từ hình ảnh.

Gradient

• createLinearGradient(): Tạo ra gradient tuyến tính, nơi màu sắc thay đổi theo một hướng cụ thể.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Tạo gradient tuyến tính
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');

// Sử dụng gradient làm màu tô
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

• createRadialGradient(): Tạo ra gradient hình tròn, với màu sắc thay đổi từ một điểm trung tâm ra ngoài.

const gradientRadial = ctx.createRadialGradient(canvas.width / 2, canvas.height / 2, 10, canvas.width / 2, canvas.height / 2, canvas.width / 2);
gradientRadial.addColorStop(0, 'yellow');
gradientRadial.addColorStop(1, 'green');

ctx.fillStyle = gradientRadial;
ctx.fillRect(0, 0, canvas.width, canvas.height);

const image = new Image();
image.src = 'path_to_image.jpg';  // Đảm bảo hình ảnh đã tải trước khi vẽ

image.onload = function() {
  const pattern = ctx.createPattern(image, 'repeat');  // Lặp lại hình ảnh
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};

const image = new Image();
image.src = 'path_to_image.jpg';

image.onload = function() {
  ctx.drawImage(image, 50, 50, 200, 150);  // Vẽ ảnh tại (50, 50) với kích thước 200x150
};

const image = new Image();
image.src = 'path_to_image.jpg';

image.onload = function() {
  ctx.drawImage(image, 0, 0, 100, 100, 50, 50, 200, 200);  // Cắt và vẽ một phần ảnh
};

const image = new Image();
image.src = 'path_to_image.jpg';

image.onload = function() {
  ctx.drawImage(image, 0, 0, image.width / 2, image.height / 2);  // Phóng to ảnh
};

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 0;  // Vị trí ban đầu của đối tượng
const speed = 2;  // Tốc độ di chuyển

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // Xóa canvas
  ctx.beginPath();
  ctx.arc(x, canvas.height / 2, 30, 0, Math.PI * 2);  // Vẽ hình tròn
  ctx.fillStyle = 'red';
  ctx.fill();
  
  x += speed;  // Cập nhật vị trí
  if (x > canvas.width) {
    x = 0;  // Nếu ra ngoài canvas, quay lại vị trí ban đầu
  }
  
  requestAnimationFrame(animate);  // Gọi lại hàm animate để vẽ lại khung hình tiếp theo
}

animate();  // Bắt đầu hoạt ảnh

class Shape {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color || 'black';
  }

  draw(ctx) {
    // Được kế thừa và triển khai ở lớp con
  }
}

class Circle extends Shape {
  constructor(x, y, radius, color) {
    super(x, y, color);
    this.radius = radius;
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
}

class Rectangle extends Shape {
  constructor(x, y, width, height, color) {
    super(x, y, color);
    this.width = width;
    this.height = height;
  }

  draw(ctx) {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

const shapes = [
  new Circle(100, 100, 50, 'red'),
  new Rectangle(200, 200, 150, 100, 'blue')
];

function drawShapes(ctx) {
  shapes.forEach(shape => shape.draw(ctx));
}

// Thêm sự kiện để vẽ khi người dùng di chuột trên canvas
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);

// Game bóng nảy cơ bản với Canvas
function animateBall() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ball.move(); // Di chuyển bóng
  ball.draw(ctx); // Vẽ bóng lên canvas
  requestAnimationFrame(animateBall); // Gọi lại hàm để tạo hoạt ảnh
}