<canvas> là một thẻ HTML cho phép bạn có thể sử dụng để vẽ sử dụng các script( thường là JavaScript). Nó có thể, được sử dụng là ảnh (và đơn giản) animation. Bức ảnh ở bên phải là một vài ví dụ của việc dùng <canvas> mà sẽ được trình bày ở phần sau trong tutorial này.
<canvas> lần đầu tiên được giới thiệu bởi Apple cho Mac OS X Dashboard sau đó được thực thi trong Safari và Google Chrome. Các trình duyệt dựa trên Gecko 1.8, nhưFirefox 1.5, cũng cung cấp phần tử này. Phần tử <canvas> là một phần của WhatWG Web applications 1.0 cũng được biết đến như HTML 5.
Tutorial này hướng dẫn cách sử dụng thẻ <canvas> trong các trang HTML. Các ví dụ được cung cấp có thể giúp bạn hiểu rõ hơn điều bạn có thể làm với <canvas> và có thể được sử dụng để bắt đầu xây dựng ứng dụng của riêng bạn.
Trước khi bắt đầu
Sử dụng thẻ <canvas> không quá khó nhưng banjn cần hiểu cơ bản về HTML và JavaScript.
Thẻ <canvas> không được hỗ trợ trong một số trình duyệt cũ, nhưng đã được hỗ trợ từ bản Firefox 1.5 trở lên, Opera 9 trở lên, phiên bản mớ hơn của Safari, Chrome và Internet Explorer 9.
Nội dung tutorial
- Cách sử dụng cơ bản
- Vẽ các khối hình
- Sử dụng hình ảnh
- Sử dụng styles và màu sắc
- Các phép biến đổi hình
- Compositing
- Animation cơ bản
- Tối ưu hóa canvas
Xem thêm
- Trang các chủ đề về Canvas
- Vẽ hình với Canvas
- Ví dụ về Canvas
- HTML5 Tutorial
- Vẽ chữ sử dụng Canvas
- Thêm chữ vào Canvas
- Ví dụ về Canvas - Game, ứng dụng, công cụ, và tutorial
- Công cụ vẽ Canvas
- Ứng dụng animation với canvas
- interactive canvas tutorial
- Canvas Cheat Sheet với tất cả các thuộc tính và phương thức
- Adobe Illustrator với plugin Canvas
- HTML5 Canvas Tutorials
- Làm thế nào để vẽ một điểm với Canvas API
- Làm thế nào để vẽ đường cong Bé zier N điểm với Canvas API
- Tutorial canvas 31 ngày