Scribd Logo
Upload

Welcome to Scribd!

  • Canvas (HTML5) Blog

    Uploaded by

    Hữu Hoàng
    6 views19 pages

    Original Title

    Canvas (HTML5) blog

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views19 pages

    Canvas (HTML5) Blog

    Uploaded by

    Hữu Hoàng

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 19

    Canvas (HTML5)

    Tên: Hoàng Hữu Thông


    Email: thonghh@vietnamlab.vn
    1
    Giới thiệu về Canvas
    ● Canvas là 1 phần tử (element) trong HTML5 cho phép thực hiện kết xuất(render) đồ họa trên trang web.

    ● Canvas được giới thiệu lần đầu bởi Apple vào năm 2004 trên Mac OS X Webkit, dùng để xây dựng các ứng
    dụng tiện ích trên Dashboard và trình duyệt safari.

    ● Năm 2006 được tổ chức WHATWG chuẩn hóa và đề xuất trở thành một thông số kỹ thuật cho thế hệ web
    mới.

    ● WHATWG (Web Hypertext Application Technology Working Group) là tổ chức được thành lập bởi Apple,
    Mozilla, Opera, Google ...để phát triển các công nghệ ứng dụng liên quan đến HTML.
    Các đặc điểm của Canvas
    ● Trước khi HTML5 ra đời, để làm các chương trình đồ họa(graphic), hoạt hình(ani) các lập trình viên thường
    nhúng 1 chương trình của bên FLASH, Java Applet ...khiến website trở nên nặng hơn, phát sinh sinh các vấn
    đề về bảo mật, khiến điện thoại nhanh hết pin.

    ● Canvas ra đời để thực hiện các tác vụ đồ họa thế cho Flash.

    ● Canvas sử dụng code Javascript để vẽ nên sẽ rất tiện phối hợp với các sự kiện khác như click button,
    download api trên trang web.

    ● Canvas hỗ trợ đa nền tảng trên PC lẫn smart phone.


    Code init canvas cơ bản
    <!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>
    // chọn mã canvas bằng id
    var c = document.getElementById("frame_canvas");
    // trả về đối tương đồ họa trên khung vẽ
    var ctx = c.getContext("2d");
    // bắt đầu vẽ hoặc thiết lập nét vẽ hiện tại
    ctx.beginPath();
    </script>
    <style>
    #frame_canvas {border:1px solid black;}
    </style>
    ● Giao diện web khi thực hiện thiết lập.

    ● Sau bước thiết lập này thì chỉ code trên javascript trên thẻ canvas.
    Hệ trục tọa độ trong canvas
    ● Canvas sử dụng rất nhiều kiến thức đến từ hình học không gian.

    ● Trục toạ độ (0, 0) trong canvas bắt đầu từ góc trên bên trái.
    Vẽ đường thẳng
    <script>
    var c = document.getElementById("frame_canvas");
    var ctx = c.getContext("2d");
    // bắt đầu vẽ 1 đối tượng đồ họa mới
    ctx.beginPath();
    // di chuyển tới toạ độ cần để vẽ đường thẳng, patameter là x, y
    ctx.moveTo(20, 20);
    // vẽ 1 đường thẳng (từ toạ độ đang đứng) tới toạ độ mới , patameter là x, y
    ctx.lineTo(20, 100);
    ctx.lineTo(70, 100);
    // khai báo màu đường viền
    ctx.strokeStyle = "green";
    // tiến hành viền
    ctx.stroke();
    </script>
    Cú pháp Japascript: context.moveTo(x, y);
    Di chuyển con trỏ chuột ảo tới địa điểm x, y

    Parameter Decription
    x Toạ độ x
    y Toạ độ y

    Cú pháp Japascript: context.lineTo(x, y);


    Vẽ 1 đường thẳng từ điểm hiện tại của con trỏ tới toạ độ được khai báo trong lineTo

    Parameter Decription
    x Toạ độ x
    y Toạ độ y
    Hiển thị line trên trang web
    Vẽ 1 hình chữ nhật
    <script>
    var c = document.getElementById("frame_canvas");
    var ctx = c.getContext("2d");
    // bắt đầu vẽ 1 đối tượng đồ họa mới
    ctx.beginPath();
    // hàm vẽ hình chữ nhật với các parameter lần lượt x, y, chiều dài, chiều cao
    ctx.rect(20, 20, 150, 100);
    // khai báo màu background của hình chữ nhật
    ctx.fillStyle = "#3EADEF";
    // tô màu hình chữ nhật
    ctx.fill();
    // khai báo độ dài đường viền (border) của hình chữ nhật
    ctx.lineWidth = 5;
    // khai báo độ dài đường viền (border)
    ctx.strokeStyle = "black";
    // tiến hành viền hình chữ nhật
    ctx.stroke();
    </script>
    Cú pháp Japascript:
    context.rect(x, y, width, height);

    Parameter Decription

    x Toạ độ x

    y Toạ độ y

    width Chiều dài

    height Chiều rộng


    Hiển thị hình chữ nhật trên trang web
    Vẽ 1 hình tròn
    <script>
    var c = document.getElementById("frame_canvas");
    var ctx = c.getContext("2d");
    // bắt đầu vẽ 1 đối tượng đồ họa mới
    ctx.beginPath();
    // hàm vẽ hình tròn với các parameter lần lượt là
    // x, y, độ dài bán kính, góc bắt đầu, góc kết thúc, vẽ theo chiều kim đồng hồ hay ngược(boolean)
    ctx.arc(100, 75, 50, 0, 1 * Math.PI);
    // khai báo màu background
    ctx.fillStyle = "#3EADEF";
    // tô màu
    ctx.fill();
    // khai báo độ dài đường viền (border)
    ctx.lineWidth = 5;
    // khai báo màu đường viền
    ctx.strokeStyle = "black";
    // tiến hành viền
    ctx.stroke();
    </script>
    Cú pháp Japascript:
    context.arc(x, y, r, startAngle, endAngle, counterclockwise);

    Parameter Decription

    x Toạ độ x

    y Toạ độ y

    r Độ dài bán kính

    startAngle Góc bắt đầu theo radians (nếu là 0 sẽ bắt đầu vẽ từ góc 3
    giờ)
    endAngle Góc kết thúc theo radians

    counterclockwise true: theo chiều kim đồng hồ


    false: ngược chiều kim đồng hồ
    Sử dụng lập trình hướng đối tượng
    trong lập trình đồ hoạ
    ● Nên sử dụng lập trình hướng đối tượng khi lập trình canvas vì các ưu điểm sau đây:

    ○ Dễ tạo các đối tượng đồ hoạ.


    ○ Dễ thêm.
    ○ Dễ quản lý.
    ○ Dễ cập nhật thay đổi thuộc tính của các đối tượng đồ hoạ.
    ○ Clean code.
    Vẽ 1 hình tam giác dùng hướng
    đối tượng
    ● Không giống như hình vuông, tròn, đường thẳng… hình tam giác không có hàm hỗ trợ vẽ trong canvas nên chúng

    ta sẽ tự vẽ.
    ● Cách vẽ hình tam giác cơ bản:
    ○ Tạo đối tượng Point gồm 2 biến x, y.
    ○ Tạo 1 đối tượng hình tam giác chứa 3 point là 3 điểm của hình tam giác.
    ○ Nối 3 Point lại với nhau
    Tạo giao thức ( giống class trong java) Point

    // giao thức Điểm gồm 2 biến x, y dùng để lưu toạ độ điểm


    function Point(x, y) {
    this.x = x;
    this.y = y;
    }
    Tạo giao thức Triangle
    // giao thức Tam Giác gồm 3 biến point là object được tạo từ giao thức POINT
    function Triangle(point1, point2, point3) {
    this.point1 = point1;
    this.point2 = point2;
    this.point3 = point3;
    // hàm vẽ tam giác, param nhận vào là context canvas
    this.draw = function(context){
    context.beginPath();
    context.moveTo(this.point1.x, this.point1.y);
    context.lineTo(this.point2.x, this.point2.y);
    context.lineTo(this.point3.x, this.point3.y);
    context.lineTo(this.point1.x, this.point1.y);
    context.lineWidth = 1;
    context.strokeStyle = "black";
    context.stroke();
    };
    }
    Vẽ tam giác từ giao thức Point và Triangle
    // tạo 3 Point
    var point1 = new Point(10, 10);
    var point2 = new Point(10, 150);
    var point3 = new Point(70, 10);

    // đưa 3 Point vào giao thức Triangle


    var triangle1 = new Triangle(point1, point2, point3);
    triangle1.draw(ctx);

    You might also like