HTML Canvas
HTML Canvas là gì?
HTML <canvas> là một phần tử trong HTML, nó được sử dụng để vẽ đồ họa cho web thông qua Javascript.
HTML <canvas> được sử dung cho các ứng dụng hoạt hình (animation), đồ họa trò chơi (Game graphics), vẽ biểu đồ trực quan hóa dữ liệu, xử lý Video thời gian thực (Real-time video processing)...
HTML <canvas> chỉ là nơi chứa đồ họa, bạn cần phải sử dụng Javascript để vẽ đồ họa.
HTML <canvas> có các phương thức vẽ đồ họa như: Vẽ đường thẳng (Line), hình hộp, hình tròn , vẽ font chữ và vẽ hình ảnh...
Ví dụ:
Cách tạo và sử dụng Canvas
Cú pháp tạo một Canvas như sau:
Ví dụ
Lưu Ý:
Canvas có hình dạng là hình chữ nhật (rectangular), mặc định ban đầu nó không có border và không có nội dung.
Để thêm border cho Canvas bạn cần sử dụng thuộc tinh style.
Ví dụ tạo một Canvas ban đầu trống không có nội dung như sau:
Ví dụ
Kết quả:
Sau khi tạo Canvas xong, để thêm nội dung chữ hoặc hình ảnh vào Canvas bạn cần sử dụng Javascript vẽ điền chúng vào Canvas.
Vẽ chữ trong Canvas HTML (Draw text in Canvas).
Để hiển thị chữ (Text) trong Canvas bạn cần sử dụng 2 phương thức fillText và strokeText. Ngoài ra bạn có thể tùy chỉnh nội dung Text bằng các thuộc tính như :font, textAlign, textBaseline...
Ví dụ viết code sử dụng phương thức fillText để điền chữ vào Canvas như sau:
Ví dụ
<script>
var cv = document.getElementById("myCanvas1");
var ctx = cv.getContext("2d");
ctx.font = "26px Arial";
ctx.fillText("Welcome to ihoclaptrinh.com", 10,50);
</script>
Kết quả:
Ví dụ viết code sử dụng phương thức strokeText để điền chữ vào Canvas như sau:
Ví dụ
<script>
var cv = document.getElementById("myCanvas2");
var ctx = cv.getContext("2d");
ctx.font = "26px Arial";
ctx.strokeText("Welcome to ihoclaptrinh.com", 10,50);
</script>
Kết quả:
Vẽ đường thẳng trong Canvas HTML (Draw Line in Canvas):
Ví dụ
<script>
var cv = document.getElementById("myCanvas3");
var ctx = cv.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(350,100);
ctx.strokeStyle = "red";
ctx.stroke();
</script>
Kết quả:
Vẽ hình tam giác trong Canvas HTML.
Ví dụ
<script>
var cv = document.getElementById("myCanvas7");
var ctx = cv.getContext("2d");
ctx.moveTo(120,20);
ctx.lineTo(200,20);
ctx.lineTo(180,80);
ctx.lineTo(120,20);
ctx.strokeStyle = "green";
ctx.stroke();
</script>
Kết quả:
Vẽ hình chữ nhật trong Canvas HTML.
Ví dụ
<script>
var cv = document.getElementById("myCanvas4");
var ctx = cv.getContext("2d");
ctx.fillStyle = "orange";
ctx.fillRect(25, 10, 160, 80);
</script>
Kết quả:
Vẽ hình vuông trong Canvas HTML.
Ví dụ
<script>
var cv = document.getElementById("myCanvas5");
var ctx = cv.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(25, 10, 80, 80);
</script>
Kết quả:
Vẽ hình tròn trong Canvas HTML.
Ví dụ
<script>
var cv = document.getElementById("myCanvas6");
var ctx = cv.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.arc(180, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Kết quả:
Vẽ và tạo dải màu (Draw Linear Gradient).
Ví dụ
<script>
var cv = document.getElementById("myCanvas8");
var ctx = cv.getContext("2d");
</script>
Kết quả:
Vẽ và tạo ảnh image (Draw Image).
Ví dụ
<img id="id_img" src="image-do-an.jpg" width="300" height="200">
<script>
var cv = document.getElementById("myCanvas9");
var ctx = cv.getContext("2d");