Thông tin tài liệu
http://vietjack.com/html5/index.jsp Copyright © vietjack.com Canvas HTML5 Phần tử HTML5 cho bạn cách dễ dàng mạnh mẽ để vẽ đồ họa sử dụng JavaScript Nó sử dụng để vẽ đồ thị, tạo photo, làm hiệu ứng Ở thẻ đơn giản mà có hai thuộc tính riêng width height cộng với tất thuộc tính core HTML5 id, name, class, … Bạn dễ dàng tìm thấy phần tử DOM sử dụng phương thứcgetElementByid() sau: var canvas = document.getElementById("mycanvas"); Bây xem ví dụ đơn giản sử dụng phần tử tài liệu HTML5 #mycanvas{border:1px solid red;} Nó cho kết sau: Rendering Context Phần tử lúc đầu trống, để hiển thị đó, script cần để truy cập Rendering Context vẽ Phần tử canvas có phương thức DOM gọi getContext, sử dụng để đạt Rendering Context hàm vẽ Hàm nhận tham số, kiểu context 2d Sau code để nhận context yêu cầu với kiểm tra trình duyệt bạn hỗ trợ phần tử hay không: var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext('2d'); // canvas-unsupported code here if (canvas.getContext){ // drawing code here } else { } http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/html5/index.jsp Copyright © vietjack.com Trình duyệt hỗ trợ Phiên Firefox, Safari, Chrome Opera tất hỗ trợ cho HTML5 Canvas IE8 khơng hỗ trợ Canvas Bạn sử dụng ExplorerCanvas để có hỗ trợ Canvas thơng qua IE Bạn cần bao gồm Javascript sau: Ví dụ HTML5 Canvas Sau ví dụ liên quan tới phần tử HTML5 Ví dụ Miêu tả Vẽ hình chữ nhật Học cách vẽ hình chữ nhật sử dụng phần tử HTML5 Vẽ đường Học cách để tạo Shape sử dụng đường (path) phần tử HTML5 Vẽ đường thẳng Học cách vẽ đường thẳng sử dụng phần tử HTML5 Vẽ đường cong Bezier Học cách vẽ đường cong bezier sử dụng phần tử HTML5 Vẽ đường cong Quadratic Học cách vẽ đường cong quandratic sử dụng phần tử HTML5 Sử dụng hình ảnh Học cách để sử dụng ảnh với phần tử HTML5 Tạo Gradient Học cách để tạo Gradient sử dụng phần tử HTML5 Style Color Học cách để áp dụng Style màu sử dụng phần tử HTML5 http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/html5/index.jsp Copyright © vietjack.com Text Font Học cách để tạo văn với font kích cỡ khác Pattern Shadow Học cách để vẽ pattern Shade (shadow) Trạng thái Canvas Học cách để lưu hồi phục trạng thái canvas thực hoạt động vẽ phức tạp canvas Phương thức Translate Phương thức sử dụng để di chuyển canvas điểm gốc tới điểm khác grid Phương thức Rotate Phương thức sử dụng để quay canvas xung quanh điểm gốc Phương thức Scale Phương thức sử dụng để tăng giảm đơn vị Canvas Grid Phương thức Transform Phương thức cho phép chỉnh sửa trực tiếp tới ma trận biến đổi Phương thức Phương thức sử dụng để che khu vực định globalcompositeoperation xóa khu vực từ canvas Hiệu ứng HTML5 Học cách tạo hiệu ứng sử dụng HTML5 canvas Canvas JavaScript http://vietjack.com/ Trang chia sẻ các bài học online miễn phí ... Opera tất hỗ trợ cho HTML5 Canvas IE8 khơng hỗ trợ Canvas Bạn sử dụng ExplorerCanvas để có hỗ trợ Canvas thông qua IE Bạn cần bao gồm Javascript sau: Ví dụ HTML5 Canvas Sau ví dụ liên quan tới phần tử HTML5 Ví dụ Miêu tả Vẽ hình chữ nhật Học cách vẽ hình chữ nhật sử dụng phần tử HTML5 Vẽ đường Học cách... đường (path) phần tử HTML5 Vẽ đường thẳng Học cách vẽ đường thẳng sử dụng phần tử HTML5 Vẽ đường cong Bezier Học cách vẽ đường cong bezier sử dụng phần tử HTML5 Vẽ đường
Ngày đăng: 02/12/2017, 17:40
Xem thêm:
