Canvas: Giới thiệu về Canvas

Canvas: Giới thiệu về Canvas - Day 1

Ngày 11-11 là ngày lễ độc thân, người người săn sale. Còn mình thì dùng tí thời gian học làm sửu nhi. Học một tí về Canvas để vẽ trái tim, đu theo mạng xã hội. Lúc đầu mình tưởng dễ nhưng không dễ tí nào. Copy code cũng cần có fundamental nên mình sẽ học 1 tí để tùy biến code có sẵn.

HTML5 Canvas là gì?

Canvas là một phần tử của HTML5, cho phép thực hiện lập trình kết xuất đồ họa các đối tượng hai chiều trên trang web. Canvas chiếm một khu vực trong trang web với chiều rộng và chiều cao định trước. Sau đó sử dụng Javascript có thể truy cập vào khu vực này để vẽ thông qua một tập các hàm đồ họa tương tự như các API 2D khác.

Canvas là một vùng hình chữ nhật trên trang HTML. Theo mặc định, canvas không có đường viền và không có nội dung.

Setup project

Cơ bản một website sẽ gồm có 3 thành phần chính: HTML, CSS, và javascript.

📁 heart
    └──index.html
    └──📂 lib
        ├──style.css
        ├──script.js

Ở file index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Nhat ky hoc tap</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="lib/style.css" />
  </head>
  <body>
    <canvas id="canvas1"> </canvas>
    <script src="lib/script.js"></script>
  </body>
</html>

File style.css


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  
#canvas1{
    position: absolute;
    background: black;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

File script.js

var canvas = document.getElementById('canvas1');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // draw something
} else {
  alert("This browser doesn't support canvas."
}

2D Context

2D Context cung cấp cho bạn vẽ hình 2D đơn giản như path, rectangle, và arcs.

Tọa độ 2D context là từ góc trên bên trái của phần tử canvas với điểm (0,0) như hình bên dưới

Kích thước mặc định của Canvas: width = 300, height = 150

Giả sử bạn định nghĩa 1 canvas với width = 200 và height = 100, như vậy canvas có tất cả 20,000 pixel. Và bạn có thể tăng gấp đôi kích thước của canvas lên nhưng lượng pixel mà bạn thao tác với canvas vẫn chỉ là 20,000.

Dựa vào ví dụ trên, chúng ta thay đổi javascript như sau:

(() => {
    const canvas = document.querySelector('#canvas1');
    if (!canvas.getContext) {
        return;
    }
    // get the context
    const ctx = canvas.getContext('2d');

    // set fill and stroke styles
    ctx.fillStyle = '#F0DB4F';
    ctx.strokeStyle = 'red';

    // draw a rectangle with fill and stroke
    ctx.fillRect(50, 50, 150, 100);
    ctx.strokeRect(50, 50, 150, 100);

})();

Kết quả cho thấy hình chữ nhật bị mờ.

Bạn mở comment dòng canvas.width và canvas.height, lúc này bạn sẽ thấy hình chữ nhật không bị bể.

Khi bạn thay đổi kích thước trình duyệt so với kích thước lúc ban đầu, bạn cần thêm event resize để render lại canvas.

Chúng ta sẽ viết 2 hàm như sau:

window.addEventListener('resize',function(){});
draw();

(() => {
    const draw = (canvas, ctx) => {
        // set fill and stroke styles
        ctx.fillStyle = '#F0DB4F';
        ctx.strokeStyle = 'red';
        // draw a rectangle with fill and stroke
        ctx.fillRect(50, 50, 150, 100);
        ctx.strokeRect(50, 50, 150, 100);
        console.log("width: " + canvas.width + " - height: " + canvas.height);
    }

    const canvas = document.querySelector('#canvas1');
    if (!canvas.getContext) {
        return;
    }
    // get the context
    const ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    draw(canvas, ctx);

    window.addEventListener('resize',function(){
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        draw(canvas, ctx);
    });
})();

Tham khảo

https://yinyangit.wordpress.com/2012/05/16/html5-canvas-thay-doi-kich-thuoc-canvas-theo-trinh-duyet/

https://www.javascripttutorial.net/web-apis/javascript-canvas/

Nhật ký học tập

Tìm kiếm Blog này