VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

HTML5 Tuts

HTML5 là gì? Cú pháp HTML5 cơ bản Các thuộc tính HTML5 Sự kiện trong HTML5 WEB Forms 2 trong HTML5 SVG trong HTML5 MathML trong HTML5 WEB Storage trong HTML5 WEB SQL trong HTML5 Sự kiện Server-Sent trong HTML5 WEB Socket trong HTML5 Canvas trong HTML5 Audio & Video trong HTML5 GeoLocation trong HTML5 Micro Data HTML5 Drag & Drop trong HTML5 Web worker trong HTML5 Tổng hợp các thẻ cơ bản trong HTML5 Tổng hợp các thẻ cũ trong HTML5 Tổng hợp các thẻ mới trong HTML5
1 / 3
❮ ❯

Canvas trong HTML5


WebSockets trong HTML5
Audio và Video trong HTML5

Nội dung chính

  • Canvas trong HTML5
  • Rendering Context
  • Trình duyệt hỗ trợ

Canvas trong HTML5

Phần tử HTML5 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ẻ đơ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ử 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ử 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>


Rendering Context

Phần tử lúc đầu là trống, và để hiển thị một cái gì đó, một script đầu tiên cần để truy cập Rendering Context và vẽ trên nó.

Phần tử canvas có một phương thức DOM được gọi là getContext, được sử dụng để đạt được Rendering Context và các hàm vẽ của nó. Hàm này nhận một tham số, kiểu của context là 2d.

Sau đây là code để nhận context được yêu cầu cùng với một kiểm tra nếu trình duyệt của bạn hỗ trợ phần tử hay không:

var canvas  = document.getElementById("mycanvas");
if (canvas.getContext){   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   // canvas-unsupported code here 
}  

Trình duyệt hỗ trợ

Phiên bản mới nhất của Firefox, Safari, Chrome và Opera tất cả hỗ trợ cho HTML5 Canvas nhưng IE8 không hỗ trợ Canvas.

Bạn có thể sử dụng ExplorerCanvas để có sự hỗ trợ Canvas thông qua IE. Bạn chỉ cần bao gồm Javascript sau:


<!--[if IE]><script src="excanvas.js"></script><![endif]-->

WebSockets trong HTML5
Audio và Video trong HTML5

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Cú pháp HTML5 cơ bảnHTML5 là gìTổng hợp các thẻ mới trong HTML5Tổng hợp các thẻ cũ trong HTML5Tổng hợp các thẻ cơ bản trong HTML5Web Worker trong HTML5Drag và Drop trong HTML5Microdata trong HTML5Geolocation trong HTML5Audio và Video trong HTML5Canvas trong HTML5WebSockets trong HTML5

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml