Các loại đồ hoạ trên Canvas trong HTML - HTML Canvas Graphic

Thẻ HTML <canvas> được sử dụng để vẽ đồ họa trên một trang web.

Hình ảnh bên trái được tạo ra bằng <canvas>. Nó hiển thị bốn phần: một hình chữ nhật màu đỏ, một hình chữ nhật gradient, một hình chữ nhật đa màu sắc và văn bản đa màu sắc.

HTML Canvas là gì?

Thẻ HTML <canvas> được sử dụng để vẽ đồ họa ngay lập tức bằng JavaScript.

Thẻ <canvas> chỉ là một nơi chứa đồ họa. Bạn phải sử dụng JavaScript để thực sự vẽ đồ họa.

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

Hỗ trợ trình duyệt

Các con số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn phần tử <canvas>

Phần tử	Chrome	Firefox	IE	Opera	Safari
<canvas>	4.0	9.0	2.0	3.1	9.0

Ví dụ về Canvas

Một canvas là một khu vực hình chữ nhật trên một trang HTML. Theo mặc định, canvas không có viền và không có nội dung.

Dấu mốc trông như sau:

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

Lưu ý: Luôn luôn chỉ định thuộc tính id (để tham chiếu trong script), và thuộc tính width và height để xác định kích thước của canvas. Để thêm viền, sử dụng thuộc tính style.

Dưới đây là một ví dụ về một canvas cơ bản không có nội dung:

Ví dụ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Thêm JavaScript

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

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

Vẽ đường

Ví dụ

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.moveTo(0, 0);

ctx.lineTo(200, 100);

ctx.stroke();

</script>

Vẽ hình tròn

Ví dụ

<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>

Vẽ văn bản

Ví dụ

<script>

        var c = document.getElementById("myCanvas");

        var ctx = c.getContext("2d");

        ctx.font = "30px Arial";

        ctx.fillText("Hello World", 10, 50);

</script>

Vẽ văn bản viền

Ví dụ

<script>

        var c = document.getElementById("myCanvas");

        var ctx = c.getContext("2d");

        ctx.font = "30px Arial";

        ctx.strokeText("Hello World", 10, 50);

</script>

Vẽ đường gradient tuyến tính

Ví dụ

<script>

        var c = document.getElementById("myCanvas");

        var ctx = c.getContext("2d");

        // Tạo gradient

        var grd = ctx.createLinearGradient(0, 0, 200, 0);

        grd.addColorStop(0, "red");

        grd.addColorStop(1, "white");

        // Fill bằng gradient

        ctx.fillStyle = grd;

        ctx.fillRect(10, 10, 150, 80);

</script>

Vẽ đường gradient hình tròn

Ví dụ

<script>

        var c = document.getElementById("myCanvas");

        var ctx = c.getContext("2d");

        // Tạo gradient

        var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);

        grd.addColorStop(0, "red");

        grd.addColorStop(1, "white");

        // Fill bằng gradient

        ctx.fillStyle = grd;

        ctx.fillRect(10, 10, 150, 80);

</script>

Vẽ hình ảnh

Ví dụ

<script>

        var c = document.getElementById("myCanvas");

        var ctx = c.getContext("2d");

        var img = document.getElementById("scream");

        ctx.drawImage(img, 10, 10);

</script>