Canvas: Vẽ hình đơn giản trong Canvas - Day 2

Trong bài viết này, chúng ta sẽ tìm hiểu cách sẽ một số hình đơn giản trong Canvas: hình chữ nhật, hình tam giác.

Hình chữ nhật

Ở bài viết trước, chúng ta đã vẽ 1 hình chữ nhật viền đỏ, phía trong tô màu vàng:

ctx.fillStyle = '#F0DB4F';
ctx.strokeStyle = 'red';
// draw a rectangle with fill and stroke
ctx.fillRect(50, 50, 150, 100);
ctx.strokeRect(50, 50, 150, 100);

The CanvasRenderingContext2D.fillRect() method of the Canvas 2D API draws a rectangle that is filled according to the current fillStyle.

Cú pháp:

fillRect(x, y, width, height)

fillStyle: Thuộc tính này biểu diễn màu hoặc phong cách để sử dụng bên trong shape. Để thay đổi màu tô, mẫu tô sử dụng thuộc tính fillStyle của context để thiết lập trước khi vẽ

strokeStyle: Thuộc tính này biểu diễn màu hoặc phong cách để sử dụng cho các đường xung quanh shape.

VD 2: Vẽ 2 hình chữ nhật chồng xéo lên nhau Ở hàm draw(), bạn thay thế bằng đoạn code sau:

ctx.strokeStyle = 'red';
ctx.strokeRect(100, 100, 150, 100);

ctx.strokeStyle = 'green';
ctx.strokeRect(200, 150, -150, -100);

Sau đó bạn thực hiện việc thêm màu

ctx.strokeStyle = 'red';
ctx.fillStyle = '#F0DB4F';
ctx.strokeRect(100, 100, 150, 100);

ctx.strokeStyle = 'green';
ctx.fillStyle = 'blue';
ctx.strokeRect(200, 150, -150, -100);

Thêm transparent cho hình chữ nhật 2 để tạo độ mờ, độ trong suốt.

Xóa một vùng cụ thể trong Canvas

context.clearRect(x,y,width,height);

Ví dụ:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
ctx.clearRect(20, 20, 100, 50); 

Vẽ tam giác

Trường hợp vẽ một tam giác sẽ khác với việc vẽ hình chữ nhật do tam giác có nhiều loại được ghép từ 3 đoạn thẳng. Để nối 3 đoạn thẳng đó lại, chúng ta sử dụng beginPath()

const draw = (canvas, ctx) => {
	var width = 125;  // Triangle Width
	var height = 105; // Triangle Height
	var padding = 20;

	// Draw a path
	ctx.beginPath();
	ctx.moveTo(padding + width/2, padding);        // Top Corner
	ctx.lineTo(padding + width, height + padding); // Bottom Right
	ctx.lineTo(padding, height + padding);         // Bottom Left
	ctx.closePath();

	// Fill the path
	ctx.fillStyle = "#ffc821";
	ctx.fill();
}

Phương thức beginPath() dùng để bắt đầu nét vẽ hoặc thiết lập lại nét vẽ hiện tại, kết thúc với closePath()

Sử dụng phương thức moveTo(), lineTo(), quadraticCurveTo(), bezierCurveTo(), arcTo() và arc() để tạo nét vẽ.

Sử dụng phương thức stroke() để hiển thị nét vẽ trên canvas.

Tham khảo

https://xuanthulab.net/canvas-trong-html5.html

https://www.javascripttutorial.net/web-apis/javascript-fillrect/ 

https://viblo.asia/p/cach-ve-mot-hinh-don-gian-trong-canvas-naQZRGWPlvx