10.1 Cơ bản việc làm việc với Canvas
Canvas API cung cấp cho lập trình viên các công cụ tốt để tạo đồ họa 2D và animation trong ứng dụng web. Trong bài giảng này, chúng ta sẽ xem xét các kiến thức cơ bản về làm việc với Canvas API, bao gồm tạo phần tử, vẽ đồ họa và tạo animation.
Tạo phần tử <canvas>
Phần tử <canvas> trong HTML được sử dụng để tạo một vùng vẽ, nơi có thể thực hiện
các thao tác đồ họa khác nhau:
<canvas id="myCanvas" width="800" height="600"></canvas>
Lấy ngữ cảnh vẽ
Để thực hiện các thao tác vẽ trên phần tử <canvas>, bạn cần lấy ngữ cảnh vẽ.
Đối với đồ họa 2D sử dụng ngữ cảnh 2d:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
10.2 Vẽ trên Canvas
1. Hình chữ nhật
Canvas API cung cấp các phương thức để vẽ hình chữ nhật đổ đầy và có viền.
Hình chữ nhật đổ đầy — fillRect:
<html>
<head>
<title>Tài liệu</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);
</script>
</body>
</html>
Hình chữ nhật có viền — strokeRect:
<html>
<head>
<title>Tài liệu</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
</script>
</body>
</html>
Xóa vùng
Phương thức clearRect được sử dụng để xóa một vùng nhất định:
<html>
<head>
<title>Tài liệu</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
ctx.clearRect(0, 0, 800, 600);
</script>
</body>
</html>
2. Đường thẳng
Để vẽ đường thẳng, sử dụng phương thức beginPath để bắt đầu một đường dẫn mới và các phương thức moveTo và
lineTo để xác định tọa độ của đường thẳng:
<html>
<head>
<title>Tài liệu</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.lineTo(150, 300);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
3. Hình tròn và cung
Phương thức arc được sử dụng để vẽ hình tròn và cung:
<html>
<head>
<title>Tài liệu</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(400, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();
</script>
</body>
</html>
4. Văn bản
Các phương thức fillText và strokeText được sử dụng để vẽ văn bản:
<html>
<head>
<title>Tài liệu</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 10, 350);
</script>
</body>
</html>
5. Gradient
Canvas API hỗ trợ tạo gradient tuyến tính và gradient hình tròn.
Gradient tuyến tính:
<html>
<head>
<title>Tài liệu</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
</script>
</body>
</html>
Gradient hình tròn:
<html>
<head>
<title>Tài liệu</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const radialGradient = ctx.createRadialGradient(400, 200, 20, 400, 200, 100);
radialGradient.addColorStop(0, 'yellow');
radialGradient.addColorStop(1, 'green');
ctx.fillStyle = radialGradient;
ctx.fillRect(300, 100, 200, 200);
</script>
</body>
</html>
6. Hình ảnh
Phương thức drawImage được sử dụng để vẽ hình ảnh lên Canvas:
<html>
<head>
<title>Tài liệu</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg';
</script>
</body>
</html>
<html>
<head>
<title>Tài liệu</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'path/to/image-1.jpg';
</script>
</body>
</html>
10.3 Animation trên Canvas
Để tạo animation, sử dụng phương thức requestAnimationFrame, cái mà gọi hàm được chỉ định
để vẽ khung hình mới của animation.
1. Cơ bản về animation
Ví dụ về animation đơn giản:
<html>
<head>
<title>Tài liệu</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
2. Animation phức tạp
Ví dụ về animation hình tròn:
<html>
<head>
<title>Tài liệu</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let angle = 0;
function animateCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.beginPath();
ctx.arc(centerX + Math.cos(angle) * 100, centerY + Math.sin(angle) * 100, radius, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
angle += 0.05;
requestAnimationFrame(animateCircle);
}
animateCircle();
</script>
</body>
</html>
3. Sử dụng bộ hẹn giờ
Để tạo animation, bạn cũng có thể sử dụng các phương thức setInterval và setTimeout.
Ví dụ về animation sử dụng setInterval:
<html>
<head>
<title>Tài liệu</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
}
setInterval(draw, 30);
</script>
</body>
</html>
GO TO FULL VERSION