STDIO
Tìm kiếm gần đây

    Nội dung

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

    02/06/2014
    25/07/2020
    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.

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

    JavaScript

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

    Thảo luận

    Đăng nhập

    Bài viết liên quan

    HTML - Phần 1: Cơ Bản Về HTML

    HTML - Phần 1: Cơ Bản Về HTML

    Thông thường để lập trình một trang web, chúng ta cần phải biết rất nhiều kiến thức như HTML, CSS, JavaScript. Nhưng đối với những người bắt đầu lập trình Web thì việc ...

    Nguyễn Nghĩa

    20/10/2015

    STML5 CF - STDIO HTML5 Compact Framework

    STML5 CF - STDIO HTML5 Compact Framework

    Với nhu cầu làm game trên nền tảng Web ngày càng nhiều trên hiện nay, việc tạo ra một Framwork giúp cho quá trình phát triển nhanh chóng hơn là điều không thể tránh khỏi. ...

    STDIO Warehouse

    27/08/2015

    HTML5 Sprite Animation – Tạo Đối Tượng Chuyển Động

    HTML5 Sprite Animation – Tạo Đối Tượng Chuyển Động

    Tạo đối tượng chuyển động là cần thiết trong mỗi game, nó làm cho trò chơi trở nên sinh động, bớt nhàm chán và tăng tính hấp dẫn cho người chơi. Vậy làm thế nào để tạo ...

    STDIO Warehouse

    25/08/2015

    Các Vấn Đề Về Debug Cơ Bản

    Các Vấn Đề Về Debug Cơ Bản

    Tư duy Debug, nếu bạn đang bão hòa về mặt tư duy debug, bài viết này sẽ giúp bạn mở rộng hơn và giúp bạn có được các tư duy debug tốt hơn. Nếu không có một kinh nghiệm ...

    La Kiến Vinh

    03/06/2014

    Socket.IO Với Cocos2d-x

    Socket.IO Với Cocos2d-x

    Trong các bài viết trước trong chương trình tự học lập trình games với Cocos2d-x của STDIO. Tôi và các tác giả khác đã giới thiệu các khái niệm, ví dụ về các thành phần ...

    Lê Viết Duy

    11/06/2017

    Cú Pháp Cơ Bản Trong Python

    Cú Pháp Cơ Bản Trong Python

    Trong bài viết ngày hôm nay, tôi sẽ cùng các bạn làm quen với những vấn đề cơ bản nhất của cú pháp trong Python. Về cơ bản thì Python có khá nhiều điểm tương đồng với các ...

    Ryan Lê

    18/03/2015

    Cơ Bản Về Ma Trận  Và Các Phép Biến Đổi Sơ Cấp Trên Dòng Của Một Ma Trận

    Cơ Bản Về Ma Trận Và Các Phép Biến Đổi Sơ Cấp Trên Dòng Của Một Ma Trận

    Một số kiến thức cơ bản về đại số tuyến tính gồm ma trận và các biến đổi sơ cấp trên dòng

    Vo Jacob

    15/09/2015

    Giới Thiệu Về Sprite Trong Cocos2d-x 3.x.x

    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 một sprite, các thuộc tính của sprite và cũng như các thao tác cơ bản với các thuộc tính của sprite ...

    Trương Xuân Đạt

    23/01/2015

    Cơ Bản Về Batch Script

    Cơ Bản Về Batch Script

    Đối với những người thường xuyên làm việc với máy tính, ắt hẳn các bạn sẽ có những thao tác thường lặp đi lặp lại. Những thao tác ấy có thể đơn giản chỉ là một cái click ...

    Amy Lê

    29/06/2015

    Xử Lý Đa Ngôn Ngữ Trong Game Với Cocos2d-x

    Xử Lý Đa Ngôn Ngữ Trong Game Với Cocos2d-x

    Hầu hết các game hiện nay trên thế giới đều chọn tiếng Anh làm ngôn ngữ chính bởi tính phổ biến của nó. Tuy nhiên, điều gì sẽ xảy ra nếu đối tượng chơi game không hề biết ...

    Ryan Lê

    29/03/2015

    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
    [email protected]

    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