Thứ Bảy, 25 tháng 2, 2017

Canvas trong HTML5

Đăng bởi abc lúc 00:55

Tags

Phần tử HTML5 <canvas> cho bạn một cách dễ dàng và mạnh mẽ để vẽ đồ họa bởi sử dụng JavaScript. Nó có thể được sử dụng để vẽ đồ thị, tạo photo, và làm các hiệu ứng.

Ở đây là một thẻ <canvas> đơn giản mà chỉ có hai thuộc tính riêng width và height cộng với tất cả các thuộc tính core trong HTML5 như id, name, và class, …

<canvas id="mycanvas" width="100" height="100"></canvas>

Bạn có thể dễ dàng tìm thấy rằng phần tử <canvas> trong DOM sử dụng phương thức getElementByid() như sau:

var canvas  = document.getElementById("mycanvas");

Bây giờ chúng ta cùng xem một ví dụ đơn giản sử dụng phần tử <canvas> trong tài liệu HTML5.

<!DOCTYPE HTML>
<html>

   <head>
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
 
   <body>
      <canvas id="mycanvas" width="100" height="100"></canvas>
   </body>
 
</html>

Nó sẽ cho kết quả sau: