Bài 35: Phần tử canvas trong HTML5

html_canvas1

Phần tử  <canvas> trong HTML được sử dụng để vẽ đồ họa cho trang web.

Các đồ họa hình bên trái được tạo ra bởi <canvas>. Nó gồm 4 phần: một hình chữ nhật màu đỏ, một hình chữ nhật có màu sám nhạt dần, một hình chữ nhật nhiều màu sắc và một chữ nhiều màu sắc.


HTML Canvas là gì?

Phần tử <canvas> trong HTML được sử dụng để vẽ các đối tượng đồ họa, nó chiếm một vùng trên trang web, qua một ngôn ngữ dạng script (thường là JavaScript).

Phần tử <canvas> chỉ chứa khối đồ họa. Bạn phải dùng một script để vẽ các đối tượng đồ họa.

Canvas cung cấp nhiều cách để vẽ đường thẳng, hình hộp, hình tròn, viết chữ, chèn ảnh,v.v.


Trình duyệt hỗ trợ

Những phiên bản trình duyệt bắt đầu hỗ trợ phần tử <canvas>.

Phần tử icon_chrome icon_ie icon_firefox icon_safari  icon_opera
<canvas> 4.0 9.0 2.0 3.1 9.0

Các ví dụ về Canvas

Canvas là một vùng hình chữ nhật trên một trang HTML. Theo mặc định, một canvas không đường biên và không chứa nội dung.

Code khai báo một phần tử canvas:


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

Chú ý: Luôn luôn đặt thuộc tính id (để có thể gọi trong script), thuộc tính widthheight để đặt kích thước của canvas.

Để thêm đường viền, sử dụng thuộc tính style như ví dụ dưới

Ví dụ cơ bản về Canvas

Code
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
Kết quả


Trình duyệt của bạn không hỗ trợ phần tử canvas.


Vẽ với JavaScript

Code

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
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.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

</body>
</html>

Kết quả


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


Vẽ đường thẳng

Code

<!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>
Kết quả


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


Vẽ hình tròn

Code

<!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.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

</body>
</html>

Kết quả


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


Chèn văn bản

Code

<!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.font = "30px Arial";
ctx.fillText("Xin chào bạn",10,50);
</script>

</body>
</html>

Kết quả


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


Chèn văn bản với chữ dạng đường nét

Code

<!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.font = "30px Arial";
ctx.strokeText("Xin chào bạn",10,50);
</script>

</body>
</html>

Kết quả


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


Vẽ hình với màu biến đổi tuyến tính (Linear Gradient)

Code

<!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");
// Tạo gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Gắn gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

Kết quả


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


Vẽ hình với màu biến đổi từ tâm (Radial Gradient)

Code

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

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

</body>
</html>

Kết quả


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


Chèn Ảnh

Code

<!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;">
Trình duyệt của bạn không hỗ trợ canvas.
</canvas>

<p><button onclick="myCanvas()">Thêm ảnh vào canvas</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>

Kết quả

Ảnh sử dụng:

The Scream


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

Có thể bạn sẽ thích…

3 phản hồi

  1. Trưởng viết:

    Không có hướng dẫn làm chữ 7 màu kia ạ

    • Phan Tiến viết:

      Bạn có thể sử dụng hàm measureText() để thiết lập các mày khác nhau cho các ký tự. Bạn copy code và xem kết quả
      code html:

      <canvas id="canvas" width="300" height="300"/>

      code script

      
      <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      
      function randomColor(){
      var r = Math.floor(Math.random()*256);
      var g = Math.floor(Math.random()*256);
      var b = Math.floor(Math.random()*256);
      return "rgb("+ r + "," + g + "," + b +")";
      }
      
      function texter(str, x, y){
      ctx.font = "30px Verdana";
      for(var i = 0; i <= str.length; ++i){
      var ch = str.charAt(i);
      ctx.fillStyle = randomColor();
      ctx.fillText(ch, x, y);
      x += ctx.measureText(ch).width;
      }
      }
      
      texter("Câu hỏi rất hay", 10, 30);
      </script>
      
      • Phan Tiến viết:

        Một ví dụ khác sử dụng màu cách phối màu gradient của 3 màu red, green, blue. Chạy thử code và xem kết quả:

        
        <!DOCTYPE html>
        <html>
        <body>
        
        <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
        Trình duyệt của bạn không hỗ trợ</canvas>
        
        <script>
        
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        
        ctx.font = "20px Georgia";
        ctx.fillText("Không thay đổi màu!", 10, 50);
        
        ctx.font = "30px Verdana";
        // Create gradient
        var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
        gradient.addColorStop("0.1", "green");
        gradient.addColorStop("0.6", "blue");
        gradient.addColorStop("0.3", "red");
        // Fill with gradient
        ctx.fillStyle = gradient;
        ctx.fillText("Thay đổi theo bảy màu", 10, 90);
        
        </script>
        </body>
        </html>
        
        

Bình luận

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *