STDIO
Tìm kiếm gần đây
    Nội dung
    0
    0
    Chia sẻ
    Nội dung
    0
    0
    Chia sẻ

    HTML Canvas Cheat Sheet

    Bảng tham khảo tổng hợp các hàm và các ghi chú hữu ích khi sử dụng Canvas trong HTML.
    29/07/2021 05/09/2021 3 phút đọc
    HTML Canvas Cheat Sheet

    Canvas

    Tạo canvas trong HTML

    Tag canvas tạo ra vùng vẽ và hỗ trợ các phương thức vẽ, với 3 thuộc tính cơ bản:

    • id: định danh canvas.
    • width: độ rộng canvas.
    • height: độ cao canvas.
    <canvas id="id-canvas" width="640" height="360" />

    Tương tác với canvas trong JavaScript

    const canvas = document.getElementById("id-canvas");
    const context2d = canvas.getContext("2d");
    const contextWebGL = canvas.getContext("webgl");

    Thao tác lấy đối tượng canvas, sau đó lấy đối tượng lưu trữ các phương thức hỗ trợ vẽ (context).

    • context2d: chứa tất cả các phương thức hỗ trợ vẽ 2D.
    • contextWebGL: chứa tất cả phương thức hỗ trợ đồ họa 3D.
    • canvas.getContext("2d"): Hỗ trợ trích xuất context 2D.
    • canvas.getContext("webgl"): Hỗ trợ trích xuất context WebGL.

    Các phương thức vẽ 2D

    Vẽ hình chữ nhật - Rectangle

    Các phương thức hỗ trợ vẽ hình chữ nhật.

    rect(x, y, width, height);
    fillRect(x, y, width, height);
    strokeRect(x, y, width, height);
    clearRect(x, y, width, height);
    • x, y: tọa độ gốc trên, bên trái cần vẽ.
    • width, height: độ rộng, độ cao của hình chữ nhật.

    Vẽ văn bản, chuỗi - Text

    Các phương thức hỗ trợ vẽ chuỗi.

    fillText(text, x, y, maxWidth);
    strokeText(text, x, y, maxWidth);
    • text: nội dung cần vẽ.
    • x, y: tọa độ gốc trên, bên trái cần vẽ.
    • maxWidth (tùy chọn): độ rộng tối đa khung vẽ.

    Vẽ ảnh - Images

    Các phương thức hỗ trợ vẽ ảnh.

    drawImage(image, x, y);
    drawImage(image, x, y, width, height);
    drawImage(image, sx, sy, sWidth, sHeight, x, y, width, height);
    • image: ảnh lưu trữ nội dung cần vẽ, ảnh có thể được tạo từ.
      • CanvasImageSource
      • CSSImageValue
      • HTMLImageElement
      • SVGImageElement
      • HTMLVideoElement
      • HTMLCanvasElement
      • ImageBitmap
      • OffscreenCanvas
    • sx, sy: tọa độ phần ảnh cần vẽ trong image.
    • sWidth, sHeight: độ rộng, độ cao của phần ảnh cần vẽ trong image.
    • x, y: tọa độ cần vẽ trên canvas.
    • width, height: độ rộng, cao vùng vẽ trên canvas.

    Path

    Các thao tác vẽ đường Path.

    beginPath();
    
    // Các phương thức tạo Path
    
    stroke(); hoặc fill();

    Các phương thức tạo Path.

    moveTo(x, y);
    lineTo(x, y);
    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
    quadraticCurveTo(cpx, cpy, x, y);
    arc(x, y, radius, startAngle, endAngle [, counterclockwise]);
    arcTo(x1, y1, x2, y2, radius);
    ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise]);
    rect(x, y, width, height);
    • moveTo: bắt đầu 1 điểm x, y.
    • lineTo: vẽ 1 đường thẳng đến tọa độ x, y.
    • bezierCurveTo: vẽ 1 đường cong từ điểm bắt đầu đến điểm kết thúc x, y, đường cong được kiểm soát bởi cp1x, cp1y và cp2x, cp2y.
    • quadraticCurveTo: vẽ 1 đường cong bậc 2 từ điểm bắt đầu đến điểm kết thúc x, y, đường cong được kiểm soát bởi cpx, cpy.
    • arc: tạo đường tròn.
    • arcTo: tạo đường tròn khi có tiếp tuyến cho trước.
    • ellipse: tạo đường ellipse.
    • rect: tạo ra hình chữ nhật.

    Style

    fillStyle
    strokeStyle

    Tạo màu sắc cho hình học trong trường hợp lắp đầy hoặc vẽ đường.

    0 Bình luận
    STDIO Training

    STDIO Training

    Trung tâm đào tạo lập trình cho doanh nghiệp

    Khi bạn nhấn vào sản phẩm do chúng tôi đề xuất và mua hàng, chúng tôi sẽ nhận được hoa hồng. Điều này hỗ trợ chúng tôi có thêm kinh phí tạo 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 - 2021