Canvas trong HTML

  • Nguyễn Lê Điệp
  • 20-01-2017
  • 152
  • 0
  • 1
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.

    Canvas trong HTML là gì?

    Canvas trong HTML được sử dụng để vẽ đồ họa thông qua các lệnh của javascript. Canvas là một phần tử chính để vẽ đồ họa và bạn phải dùng javascript để làm điều này. Bạn có thể dùng canvas để vẽ đường dẫn, hình hộp, hình tròn, văn bản, và cả hình ảnh.

    Các trình duyệt hỗ trợ

    Với các trình duyệt dường như đều hỗ trợ cho phần đồ họa canvas này
    Chrome Edge Firefox Safari Opera

    Canvas mặc định

    Theo mặc định, thì phần canvas không có đường viền cũng như nội dung trong đó. Với canvas bạn nên thêm thuộc tính id và các thuộc tính width, height và các thuộc tính border để nhìn rõ hơn.
    <canvas id="democanvas" width="300" height="100" style="border:1px solid #ccc;"></canvas>
    Xem ví dụ

    Vẽ một đường thẳng

    var c = document.getElementById("democanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(300,200);
    ctx.stroke();
    Xem ví dụ

    Vẽ một đường tròn

    var c = document.getElementById("democanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(150,100,80,0,2*Math.PI);
    ctx.stroke();
    Xem ví dụ

    Vẽ một văn bản

    var c = document.getElementById("democanvas");
    var ctx = c.getContext("2d");
    ctx.font = "40px tahoma";
    ctx.fillText("Kennis",80,110);
    Xem ví dụ

    Vẽ stroke văn bản

    var c = document.getElementById("democanvas");
    var ctx = c.getContext("2d");
    ctx.font = "40px tahoma";
    ctx.strokeText("Kennis",80,110);
    Xem ví dụ

    Vẽ Linear Gradient

    var c = document.getElementById("democanvas");
    var ctx = c.getContext("2d");
    var grd = ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"yellow");
    ctx.fillStyle = grd;
    ctx.fillRect(10,10,280,180);
    Xem ví dụ

    Vẽ Radial Gradient

    var c = document.getElementById("democanvas");
    var ctx = c.getContext("2d");
    var grd = ctx.createRadialGradient(75,50,15,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"yellow");
    ctx.fillStyle = grd;
    ctx.fillRect(10,10,280,180);
    Xem ví dụ

    Vẽ hình ảnh

    var c = document.getElementById("democanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("imgdemo");
    ctx.drawImage(img,1,10);
    Xem ví dụ
    Chúc các bạn học tốt với canvas!wink
    Từ khóa:

    Canvas trong HTML

    Canvas trong HTML

    Canvas trong HTML

    Canvas trong HTML
    Canvas trong HTML
    1 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    426
    - Hôm qua:
    724
    - Tuần này:
    1.789
    - Tuần trước:
    4.744
    - Tháng này:
    20.873
    - Tháng trước:
    21.557
    - Năm này:
    69.601
    - Năm trước:
    17.373
    - Tổng cộng:
    86.974