Cách vẽ một hình đơn giản trong Canvas

Canvas hiểu đơn giản là một thẻ tag mới của HTML5, được xây dựng từ Javascript, dùng để vẽ hình, tạo hiệu ứng, thậm chí có thể làm game đơn giản ngay trên trang web của bạn. Trong bài viết này mình sẽ không nói nhiều về định nghĩa, hay các hàm trong Canvas, những cái đấy đã có rất nhiều trang web giải thích rồi. Tuy nhiên đọc chay như vậy khá là nhàm chán và khó nhớ, vì vậy bài viết này mình sẽ hướng dẫn bạn tạo một hình vẽ đơn giản bằng Canvas. Bạn có thể thực hành ngay lập tức trên trang https://fiddle.jshell.net Một lưu ý nhỏ là có một số trình duyệt chưa hỗ trợ hoặc hỗ trợ một cách đầy đủ Canvas, bạn có thể thấy kết quả hơi khác một chút, như thế này: Đầu tiên hãy bắt đầu với file HTML, chúng ta chỉ cần khai báo thẻ tag <canvas> cùng với độ dài rộng của hình ảnh.

<canvas id="canvasId" awidth="165" height="145"></canvas>

Giờ chúng ta có một ảnh canvas trống, tất nhiên là chưa nhìn thấy gì