2/3/12

Sử dụng canvas trong HTML5 (1)

Canvas là một trong những thứ mới của HTML5. Phần tử này cho phep chúng ta sử dụng Javascript để vẽ lên nó.

Lý do cần canvas?

Canvas được dùng để vẽ tùy ý một thứ gì đó trong trình duyệt của bạn. Điều quan trọng là nó được điều khiển bằng Javascript nên độ tùy biến rât cao. Những gì có thể được vẽ trong canvas bao gồm:



  • Những biểu đồ đơn giản
  • Giao diện ngẫu hứng, bay bướm
  • Hoạt họa
  • Biểu đồ và đồ thị
  • Những ứng dụng đồ họa được nhúng vào trình duyệt
  • Vượt qua những giới hạn của CSS
  • v.v
Với những lập trình viên cao tay, họ có thể xây dựng một ứng dụng đẹp măt chạy trong 1 canvas. Điều quan trọng là xây dựng những phần tử và kêt hợp chúng lại với nhau. (Luc này thì thiêt kế lại quan trọng)

Chúng ta sẽ có gì với canvas?

Hình vẽ:
  • Hình chữ nhật
  • Đường cong
  • Đoạn và đường thẳng
  • Đường cong Bezier
  • Đường bậc hai
Hiệu ứng:
  • Tô màu
  • Chỉnh net vẽ
  • Đổ bóng
  • Tô màu tuyến tính (gradient)
  • Trong suôt
  • v.v
Biến đổi:
  • Tỉ lệ
  • Xoay
  • Tịnh tiến
  • Biến đổi ma trận
Thao tac với dữ liệu:
  • Lấy hình ảnh từ URL, từ canvas khac hay từ 1 URI (Uniform Resource Identifier)
  • Xuât ảnh từ canvas như là 1 URI

 <~ Nhấn vào để xem trình duyệt của bạn có hỗ trợ canvas hay không

  Ví dụ 1

Trong ví dụ này, ta sẽ tạo 1 canvas và xem xet trình duyệt có hỗ trợ canvas hay chưa (Xem mưc hỗ trợ HTML5 của cac trình duyệt), sau đó lấy context 2d của nó và băt đầu vẽ. Bonus luôn đây cái cheasheet của canvas, cac bạn có thể in ra một tờ giấy để tiện xem
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Canvas Test</title>
  <style type="text/css">
    #canvas {border: 1px solid gray;}
  </style>
 <script type="text/javascript">
 window.onload = function(){
  //Lấy đối tượng canvas
  var canvas = document.getElementById("canvas");
   
  //Xem đối tượng đã lấy có hỗ trợ canvas hay ko
  if(canvas.getContext("2d")) {
   var context = canvas.getContext("2d");
    
   //Chúng ta băt đầu vẽ ở đây
  }
 }
 </script>
</head>
<body>
 <div id="container">
  <h2>Sử dụng canvas trong Html5</h2>
  <canvas id="canvas" width="500" height="500">
   <p>Trình duyệt này không hỗ trợ thẻ canvas</p>
  </canvas>
 </div>
</body>
</html>
Vẽ đường thẳng 
 context.moveTo(x,y);
 context.lineTo(x,y);
 context.stroke();
Vẽ đường tròn có tô màu vàng 
 context.strokeStyle = "#000000";
 context.fillStyle = "#ffff00";
 context.beginPath();
 context.arc(100, 100, 50, 0, Math.PI*2, true);
 context.closePath();
 context.stroke();
 context.fill();
At

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)