HTML - Graphics - Amzuni - Học lập trình trực tuyến

Phần tử <canvas>

Canvas có một số phương pháp để vẽ đường dẫn, hộp, hình tròn, văn bản và thêm hình ảnh.

Canvas được hỗ trợ bởi tất cả các trình duyệt chính.

Ví dụ về canvas
Canvas là một vùng hình chữ nhật trên trang HTML. Theo mặc định, canvas không có đường viền và không có nội dung.

Đánh dấu trông như thế này:

<canvas id="myCanvas" width="200" height="100"></canvas

Thêm một JavaScript
Sau khi tạo vùng canvas hình chữ nhật, bạn phải thêm JavaScript để thực hiện vẽ.

Dưới đây là một số ví dụ:

Vẽ đường thẳng

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

Vẽ đường tròn

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

SVG (Đồ họa vectơ có thể mở rộng)

SVG định nghĩa đồ họa dựa trên vector trong XML, có thể được nhúng trực tiếp vào các trang HTML.

Đồ họa SVG có thể mở rộng và không làm giảm chất lượng nếu chúng được phóng to hoặc thay đổi kích thước:

SVG là gì?

SVG là viết tắt của Đồ họa vectơ có thể mở rộng
SVG được sử dụng để xác định đồ họa dựa trên vector cho Web
SVG định nghĩa đồ họa ở định dạng XML
Mỗi phần tử và thuộc tính trong tệp SVG đều có thể hoạt hình
SVG là khuyến nghị của W3C
SVG tích hợp với các tiêu chuẩn khác, chẳng hạn như CSS, DOM, XSL và JavaScript

Phần tử <svg>

Phần tử HTML là nơi chứa đồ họa SVG.

SVG có một số phương pháp để vẽ đường dẫn, hình chữ nhật, hình tròn, đa giác, văn bản, v.v.

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>

SVG Rectangle

<svg width="400" height="120">
  <rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>

HTML – Graphics