HTML5 Canvas

HTML Canvas là gì.

Phần tử HTML <canvas> được sử dụng để vẽ đồ họa một cách nhanh chóng bằng JavaScript trên một trang web.

Phần tử <canvas> chỉ là một bộ chứa cho đồ họa, bạn phải dùng JavaScript để vẽ chúng.

Canvas có nhiều phương thức để vẽ, đường thẳng, hình hộp, hình tròn, văn bản, và thêm ảnh.

Ví dụ về Canvas

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

Cú pháp như sau:

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

Note: Luôn chỉ ra thuộc tính id (để làm việc với JavaScript), thêm thuộc tính width và height để xác định kích thước của canvas, để thêm border dùng thuộc tính style.

Ví dụ về một canvas cơ bản:

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

Kẻ đường thẳng

Ví dụ

<!DOCTYPE html>

<html>

<body>



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

Trình duyệt của bạn không hỗ trợ canvas.</canvas>



<script>

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

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

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>



</body>

</html>

Vẽ hình tròn

Ví dụ

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

Vẽ văn bản

Ví dụ

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

Viền văn bản

Ví dụ

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

Vẽ Gradient tuyến tính

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

Vẽ Gradient hình tròn

Ví dụ

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

Vẽ hình ảnh

Ví dụ

<!DOCTYPE html>

<html>

<body>



<p>Image to use:</p>

<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">



<p>Canvas to fill:</p>

<canvas id="myCanvas" width="250" height="300"

style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>



<p><button onclick="myCanvas()">Try it</button></p>



<script>

function myCanvas() {

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

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

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

  ctx.drawImage(img,10,10);

}

</script>



</body>

</html>

Tags:

Bài viết liên quan

HTML Youtube Videos

HTML Plug-ins (Trình hỗ trợ)

Âm thanh trong HTML5

HTML5 Video

Multimedia trong HTML

HTML5 SVG

Quy ước và phong cách viết HTML5

Chuyển đổi sang HTML5

Các phần tử ngữ nghĩa trong HTML5

Các phần tử mới trong HTML5