Tự học HTML - Bài 27 - Xử lý Đồ họa - CANVAS

 Thẻ <canvas> dùng để vẽ đồ họa trên trang web.

Tấm hình này được tạo bởi thẻ <canvas>. Nó chứa các phần tử: 01 hình chữ nhật màu đỏ, 01 hình chữ nhật tô chuyển màu, 01 hình chữ nhật đa sắc và 01 chữ đa sắc.

HTML Canvas là gì?

Thẻ <canvas> dùng để vẽ đồ họa thông qua JavaScript.

Thẻ <canvas> chỉ là nơi chứa các phần tử đồ họa. Bạn phải dùng JavaScript để vẽ lên các hình đồ họa.

Canvas có nhiều phương thức vẽ đường thẳng, hộp, vòng tròn, chữ và chèn ảnh.

Ví dụ về Canvas

01 thẻ <canvas> là 01 hình chữ nhật trên trang HTML. Mặc định, 01 canvas không có viền và nội dung.

Hiểu nôm na, canvas chính là “tấm vải nền” cho ta vẽ lên.

Cấu trúc thẻ <canvas> như sau:

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

 

Ghi chú: luôn luôn có thuộc tính id (để có thể tham khảo đến trong JavaScript) , và thuộc tính width và height để xác định biên dựa vào thuộc tính style.

Sau đây sẽ là 01 ví dụ hết sức cơ bản về 01 canvas rỗng:

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

 

Canvas kết hợp JavaScript

Sau khi tạo vùng canvas hình chữ nhật, bạn phải dùng JavaScript để vẽ.

Sau đây là 01 vài 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ẽ 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>

Vẽ chữ

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

Tô viền chữ

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

Tô chuyển màu

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

Vẽ hình tô chuyển màu

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

Vẽ ảnh

<img id="sen" width="200" height="100" src="sen.jpg" >

<script>
window.onload = function() {
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var img = document.getElementById("sen");
  ctx.drawImage(img, 10, 10); // bắt đầu vẽ từ tọa độ (10,10)

};
</script>

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

 

Xem MỤC LỤC BÀI VIẾT VỀ HTML

• Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
• Trang fan page: https://www.facebook.com/lophocvitinhcom
• Trang web: http://lophocvitinh.com

Sưu tầm bởi #drM