I.Sơ lược Canvas:

** Canvas là 1 thẻ HTML5 dùng để tạo các ứng đồ hoạ

  • Có thể chạy tốt trên cả PC lẫn Smart phone.
  • Sử dụng HTML và Javascript để lập trình nên hoàn toàn miễn phí.
  • Canvas được tạo nên bởi tổ chức WHATWG(Web Hypertext Application Technology Working Group) vào năm 2006.

II.Tại sao nên dùng Canvas:

  • Trước đây để tạo ứng dụng đồ hoạ trên trình duyệt bạn phải dùng Flash, tuy nhiên Flash đã bị Apple không dùng trên iphone vì chạy quá tốn pin và không bảo mật.
  • Gần đây nhất các ông lớn như Google Chrome, Microsoft cũng tuyên bố khai tử Flash trên trình duyệt của mình nên Canvas sẽ thay thế Flash như 1 xu thế tất yếu.
  • HTML5 Canvas được tạo bởi tổ chức WHATWG mà tổ chức này gồm các thành viên là Apple, Google, Microsoft, Mozila...nên sẽ nhận được hỗ trợ đầy đủ trên thiết bị và hệ điều hành của các "ông lớn".

III.Tài liệu:

IV. Code tạo 1 pie chart bằng canvas:

  • Thẻ canvas pie chart mẫu:
Your browser does not support the HTML5 Canvas.

1. Tạo file

  • Tạo file index.html hoặc file có đuôi .html

2. Code canvas/ javascript

<!DOCTYPE html>
<html><head><title>Canvas</title><meta charset="UTF-8"></head>
   <body>
       <h1>HTML5 Canvas</h1>
       <canvas id="frame_canvas" width=500 height=300>
            Your browser does not support the HTML5 Canvas.
       </canvas>
   </body>
</html>
<script>
  // Phương thức Point
  function Point(x, y) {
    this.x = x;
    this.y = y;
  }

  // Phương thức Pie chart
  function PieChart(origin, radius, arrChart) {
    // toạ độ tâm
    this.origin = origin;
    // bán kính
    this.radius = radius;
    // tổng giá trị đưa vào sẽ được gán ở Constructor
    this.sumValue = 0;
    // Mãng giá trị đưa vào
    this.arrChart = arrChart;
    // toạ độ bắt đầu vẽ label
    this.xPosLabel;
    this.yPosLabel;
    // cạnh label
    this.edge = 10;

    // Hàm khởi tạo của phương thức
    this.Constructor = function() {
      var length = this.arrChart.length;

      // Tính tổng giá trị
      for (var i = 0; i < length; i++) {
        this.sumValue += this.arrChart[i].value;
      }

      for (var i = 0; i < length; i++) {
        // Tính phần trăm của mỗi giá trị dựa trên tổng
        this.arrChart[i].percent = this.arrChart[i].value / this.sumValue * 100;
        // Đổi phần trăm sang độ(degree)
        this.arrChart[i].degree = 360 * this.arrChart[i].percent / 100;
        // Đổi độ sang radian
        this.arrChart[i].radian = this.arrChart[i].degree * Math.PI / 180;
      }

      // toạ độ vẽ label cánh hình tròn 20 px
      this.xPosLabel = this.origin.x + this.radius + 20;
      this.yPosLabel = this.origin.y - this.radius + 20;
    };
    this.Constructor();

    this.draw = function(context) {
      var length = this.arrChart.length;
      var beginAngle = 0;
      // bắt đầu vẽ hình tròn ở góc 12 giờ (nếu 0 thì sẽ vẽ ở 3h)
      var endAngle = Math.PI * 1.5;
      var offsetX, offsetY, medianAngle;

      for (var i = 0; i < length; i++) {
        beginAngle = endAngle;
        endAngle = endAngle + this.arrChart[i].radian;

        // bắt đầu vẽ đối tượng pie chart
        context.beginPath();
        // Lùi về tâm điểm sau mỗi lần vẽ
        context.moveTo(this.origin.x, this.origin.y);
        // Vẽ hình tròn thành nhiều miếng khác nhau
        context.arc(this.origin.x, this.origin.y, this.radius, beginAngle,endAngle);
        context.fillStyle = this.arrChart[i].color;
        context.fill();
        // Vẽ label
        context.beginPath();
        context.rect(this.xPosLabel + 10, this.yPosLabel + (i * 20), this.edge, this.edge);
        context.fillStyle = this.arrChart[i].color;
        context.font = '12px Arial';
        var textLabel = this.arrChart[i].title + ' : ' + this.arrChart[i].value;
        context.fillText(textLabel, this.xPosLabel + 25, this.yPosLabel + (i * 20) + 8);
        context.fill();
      }

      context.beginPath();
      context.fillStyle = "black"
      context.fillText('Sum: ' + this.sumValue, this.xPosLabel + 25, this.yPosLabel + (length * 20) + 8);
      context.fill();
    }
  }

  var arrValue = [
    {
      title : 'Jan',
      value : 12,
      color : '#1F77B6'
    },
    {
      title : "Feb",
      value : 28,
      color : '#AEC6E8'
    },
    {
      title : "Mar",
      value : 18,
      color : '#F8BB01'
    },
    {
      title : "Apr",
      value : 34,
      color : '#1B602B'
    },
    {
      title : "May",
      value : 40,
      color : '#CD76B1'
    },
  ];

  var canvasElement = document.getElementById("frame_canvas");
  var ctx = canvasElement.getContext("2d");
  var originPoint = new Point(150, 150);
  var pieChart = new PieChart(originPoint, 120, arrValue);
  pieChart.draw(ctx);

</script>

<style>
#frame_canvas {
    border:1px solid black;
}</style>

V. Kết luận:

  • Hy vọng những kiến thức cơ bản trên sẽ giúp các bạn có cái nhìn tổng quan và tự tin hơn về canvas.
  • Ở những bài viết sau mình sẽ có thể giới thêm về vẽ những biểu đồ khác, ứng dụng hiệu ứng, game bằng canvas