STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    Cơ Bản Vẽ Trên <canvas> 2D Với HTML5

    Giới thiệu HTML5 canvas, tạo đối tượng vẽ, các đường nét, hình chữ nhật, đường tròn và vẽ một ảnh với canvas 2D.
    02/06/2014
    25/07/2020
    5 phút đọc
    Cơ Bản Vẽ Trên <canvas> 2D Với HTML5

    Năm 2012, W3C giới thiệu HTML5 mở đầu cho 1 giai đoạn mới của internet, HTML5 ra đời với nhiều tính năng giúp tiện dụng hơn trong việc tạo ra các văn bản web sinh động và có nhiều lựa chọn.

    Hỗ trợ các HTML tags hữu ích và mang ngữ nghĩa: <article>, <nav>, <header>, <audio> và hỗ trợ tốt về đồ họa, cái mà phiên bản trước đó không có phải sử dụng thêm các add-on lên trình duyệt như Flash.

    <canvas> ra đời kèm theo các api hỗ trợ vẽ không chỉ 2D mà còn cả WebGL để các nhà phát triển có thể tạo ra các ứng dụng đồ họa phong phú trên nền web.

    • Kiến trúc, nhà mẫu.
    • Game 2D, 3D.
    • Các phần mềm hỗ trợ 3D online 1 cách trực quan sinh động.

    Các trình duyệt web thông dụng hiện tại đã hỗ trợ tốt cho <canvas>.

    Code demo

    index.htm

    <!DOCTYPE html>
    <html>
      <head>
        <title>Demo Canvas 2D trong HTML5</title>
    
        <script>
          function load(_id) {
            var canvas = document.getElementById(_id);
            var context = canvas.getContext("2d");
    
            context.fillStyle = "#ffeeff";
            context.fillRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
    
            context.fillStyle = "#ff8800";
            context.font = "20px Arial";
            context.fillText("PRESS DRAW BUTTON", 180, 220);
          }
    
          function draw(_id) {
            var canvas = document.getElementById(_id);
            var context = canvas.getContext("2d");
    
            context.fillStyle = "#ffeeff";
            context.fillRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
    
            var pos1 = Math.floor(Math.random() * 100 + 1);
            var pos2 = Math.floor(Math.random() * 100 + 1);
            var pos3 = Math.floor(Math.random() * 100 + 1);
            var pos4 = Math.floor(Math.random() * 100 + 1);
    
            // FILL RECTANGLE
            context.fillStyle = "#ff8800";
            context.fillRect(0 + pos1, 0 + pos4, 150, 75);
    
            // DRAW RECTANGLE
            context.strokeStyle = "#000000";
            context.strokeRect(50 + pos2, 50 + pos3, 120, 75);
    
            // DRAW A LINE
            context.strokeStyle = "#00aadd";
            context.moveTo(100 + pos3, 200 + pos2);
            context.lineTo(250 + pos3, 250 + pos2);
            context.stroke();
    
            // DRAW CIRCLE
            context.beginPath();
            context.arc(250 + pos4, 50, 40, 0, 2 * Math.PI);
            context.stroke();
    
            // FILL CIRCLE
            context.fillStyle = "#ffbb33";
            context.beginPath();
            context.arc(300 + pos1, 300 + pos4, 30, 0, 2 * Math.PI);
            context.fill();
    
            // DRAW TEXT
            context.strokeStyle = "#ffbb33";
            context.font = "30px Arial";
            context.strokeText("www.stdio.vn", 10 + pos2, 300 + pos3);
    
            // FILL TEXT
            context.fillStyle = "#aa0000";
            context.font = "25px Arial";
            context.fillText("STDIO.VN", 300 + pos3, 250 + pos2);
    
            // DRAW IMAGE
            var image = new Image();
            image.src = "sins.png";
            image.onload = function () {
              context.drawImage(image, 200 + pos2, 100 + pos3);
            };
          }
        </script>
      </head>
      <body onload="load('canvas_49')">
        <div style="width: 1280; height: 720; float: left;">
          <canvas id="canvas_49" width="600" height="450">
            YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS
          </canvas>
          <div>
            <button onclick="draw('canvas_49')">
              DRAW
            </button>
            <button onclick="load('canvas_49')">
              RELOAD
            </button>
          </div>
        </div>
      </body>
    </html>
    

    sins.png

    sins.png

    Phân tích và giải thích code

    Lưu index.htmsins.png, mở index.htm bằng trình duyệt web để khảo sát.

    Tạo thẻ <canvas>

    <canvas id="canvas_49" width=600 height=450 >
      YOUR BROWSER DOES NOT SUPPORT HTML5 CANVAS
    </canvas>

    Các phép vẽ từ JavaScript sẽ được vẽ lên canvas, đặt id là canvas_49, id này dùng cho JavaScript để lấy được canvas thông qua getElementById.

    Xem xét hàm vẽ draw(_id)

    Trong hàm này có 2 phần chính, phần thứ nhất là lấy đối tượng vẽ context của canvas, phần thứ 2 là vẽ các ảnh đơn giản.

    • context là đối tượng chứa toàn bộ các phương thức hỗ trợ vẽ: vẽ đoạn thẳng, vẽ đường tròn, ...

    Tạo "context"

    var canvas = document.getElementById(_id);
    var context = canvas.getContext("2d");

    Các phương thức vẽ cơ bản

    // FILL RECTANGLE
    context.fillStyle = "#ff8800";
    context.fillRect(0 + pos1, 0 + pos4, 150, 75);
    
    // DRAW RECTANGLE
    context.strokeStyle = "#000000";
    context.strokeRect(50 + pos2, 50 + pos3, 120, 75);
    
    // DRAW A LINE
    context.strokeStyle = "#00aadd";
    context.moveTo(100 + pos3, 200 + pos2);
    context.lineTo(250 + pos3, 250 + pos2);
    context.stroke();
    
    // DRAW CIRCLE
    context.beginPath();
    context.arc(250 + pos4, 50, 40, 0, 2*Math.PI);
    context.stroke();
    
    // FILL CIRCLE
    context.fillStyle = "#ffbb33";
    context.beginPath();
    context.arc(300 + pos1, 300 + pos4, 30, 0, 2*Math.PI);
    context.fill();
    
    // DRAW TEXT
    context.strokeStyle = "#ffbb33";
    context.font = "30px Arial";
    context.strokeText("www.stdio.vn", 10 + pos2, 300 + pos3);
    
    // FILL TEXT
    context.fillStyle = "#aa0000";
    context.font = "25px Arial";
    context.fillText("Kevin La", 300 + pos3, 250 + pos2);
    
    // DRAW IMAGE
    var image = new Image();
    image.src = "sins.png";
    image.onload = function()
    {
      context.drawImage(image, 200 + pos2, 100 + pos3);
    }

    Các phương thức vẽ có trong demo

    • Vẽ ảnh chữ nhật // FILL RECTANGLE
    • Đường viền xung quanh ảnh chữ nhật // DRAW RECTANGLE
    • Vẽ một đoạn thẳng // DRAW A LINE
    • Vẽ một đường tròn // DRAW CIRCLE
    • Vẽ một ảnh tròn // FILL CIRCLE
    • Vẽ đường viền cũng quanh chữ // DRAW TEXT
    • Vẽ chữ // FILL TEXT
    • Vẽ một ảnh // DRAW IMAGE

    Khái niệm stroke và fill

    Vẽ các ảnh này ta cần phân biệt 2 khái niệm cơ bản:

    • stroke - vẽ đường viền xung quanh ảnh học đó
    • fill - vẽ và tô phần "ruột" của ảnh học đó

    context.fillStyle là chỉ định màu muốn dành cho việc tô.
    context.strokeStyle là chỉ định màu muốn dành cho việc vẽ viền.

    Vẽ một ảnh - Draw Image

    Để vẽ một ảnh, đầu tiên tải và nạp ảnh vào bộ nhớ:

    var image = new Image();
    image.src = "sins.png";

    Tạo 1 đối tượng Image, sau đó chỉ định đường dẫn tới ảnh mà ta cần tải và nạp. Sau bước này, ta có thể gọi hàm vẽ ngay

    context.drawImage(image, 200 + pos2, 100 + pos3);

    3 dòng code sau để nạp và vẽ ảnh

    var image = new Image();
    image.src = "sins.png";
    context.drawImage(image, 200 + pos2, 100 + pos3);

    image.src = "sins.png"; có thể không tải và nạp kịp do JavaScript là cơ chế bất đồng bộ, nên context.drawImage(image, 200 + pos2, 100 + pos3); có thể không kịp dữ liệu để vẽ, ta cần phải đợi cho đến khi ảnh đã tải và nạp xong - onload - mới tiến hành vẽ.

    // DRAW IMAGE
    var image = new Image();
    image.src = "sins.png";
    image.onload = function()
    {
      context.drawImage(image, 200 + pos2, 100 + pos3);
    }
    0 Bình luận
    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Đề xuất

    HTML - Phần 1: Cơ Bản Về HTML
    Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu ...
    Ruler - Công Cụ Đo Khoảng Cách Trên Windows
    Đối với ngành công nghiệp phần mềm, đặc biệt là trong kiến trúc, thiết ...

    Khám phá

    Giới Thiệu Về Sprite Trong Cocos2d-x 3.x.x
    Giới thiệu tổng quan về khái niệm cơ bản, một số cách dùng để khởi tạo ...
    Nhập Xuất Cơ Bản trong C
    Tìm hiểu về thao tác nhập xuất cơ bản trong C.
    28/07/2015
    Cách Sử Dụng Canva Để Tạo Hình Ảnh Đồ Họa, Infographics Và Các Bài Thuyết Trình Đẹp
    Canva giúp tiết kiệm thời gian và cho phép bạn tạo hình ảnh đồ họa theo ...
    05/04/2020
    Định Dạng Ảnh Bitmap - Giới Thiệu và Các Thao Tác Cơ Bản
    Trong đời thường, bạn sẽ gặp các file ảnh có định dạng .PNG, .JPG, .TGA, ...
    STML5 CF - STDIO HTML5 Compact Framework
    Bài viết giới thiệu sơ lược về STML5 CF - Framework hỗ trợ phát triển ...
    Cơ Bản về Camera trong Unity
    Giới thiệu các thông số của camera trong Unity và các thao tác thường sử ...
    10 Thứ Bạn Có Thể Làm với JavaScript
    Giới thiệu 10 ứng dụng mà JavaScript với sự mạnh mẽ của nó có thể tạo ...
    Một Số Kiến Thức Điện Tử Cơ Bản
    Tìm hiểu 1 số kiến thức điện cơ bản trước khi bắt đầu tìm hiểu sâu về ...
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020