Làm thế nào để tạo hoạt hình với HTML5 Canvas Tag - núm vú

Mặc dù thẻ canvas HTML5 không thể thay thế Flash như một cơ chế để thực hiện các trò chơi và hoạt hình trong trình duyệt, một bức tranh canvas. Điều quan trọng là sử dụng các tính năng hoạt hình đã được tích hợp sẵn trong trình duyệt.

Cấu trúc cơ bản của vòng lặp hoạt hình trong vải HTML5

Hoạt ảnh thường yêu cầu một tổ chức đặc biệt gọi là vòng lặp hình ảnh . Cấu trúc cơ bản của vòng lặp hoạt họa hoạt động giống nhau ở bất kỳ ngôn ngữ nào:

1. Khởi tạo.

   Tạo tài sản, bao gồm cả nền và bất kỳ đối tượng nào bạn sẽ sử dụng. Các đối tượng sẽ được thao tác trong thời gian thực thường được gọi là sprites . Nói chung, điều này được thực hiện khi chương trình chạy lần đầu, để tiết kiệm thời gian trong quá trình thực hiện chính. Bạn cũng có thể đặt các hằng số cho kích thước hình ảnh, kích thước hiển thị, tỷ lệ khung hình và các giá trị khác sẽ không thay đổi trong quá trình thực hiện trò chơi.

2. Xác định tỷ lệ khung hình.

   Ảnh động và trò chơi hoạt động bằng cách gọi một hàm liên tục với tốc độ quy định. Trong JavaScript, bạn thường sử dụng hàm setInterval () để chỉ định một hàm lặp lại. Tốc độ khung hình cho biết chức năng được chỉ định sẽ được gọi như thế nào. Các trò chơi và hoạt ảnh thường chạy ở tốc độ khung hình từ 10 đến 30 khung hình / giây. Tốc độ khung hình nhanh hơn mượt mà, nhưng không thể duy trì được với một số phần cứng.

   Đánh giá hiện trạng.

3. Mỗi một sprite thực sự là một phần tử dữ liệu. Trong mỗi khung, xác định xem có điều gì quan trọng đã xảy ra: Người dùng đã bấm phím? Là một phần tử được cho là di chuyển? Đã có một ma cà rồng để lại màn hình? Có phải hai sprites conk vào nhau?

   Sửa đổi dữ liệu ma.

4. Mỗi một sprite thường có vị trí hoặc dữ liệu quay mà có thể được sửa đổi trong mỗi khung. Thông thường điều này được thực hiện thông qua các phép biến đổi (dịch, xoay và quy mô), mặc dù đôi khi bạn có thể chuyển đổi giữa các hình ảnh thay vào đó.

   Xóa nền.

5. Một hình ảnh động thực sự là một loạt các hình ảnh được vẽ nhanh chóng ở cùng một nơi. Thông thường, bạn cần phải xóa nền ở đầu mỗi khung để xóa hình ảnh của khung cuối cùng.

   Vẽ lại tất cả các sprite.

6. Mỗi sprite được vẽ lại bằng dữ liệu mới của nó. Các sprite dường như di chuyển bởi vì chúng được vẽ ở vị trí hoặc hướng mới.

   Tạo các hằng số của một tính năng hoạt hình trong khung công tác HTML5

Việc xây dựng một chương trình xoay một hình ảnh bên trong một khung làm việc đòi hỏi nhiều đợt mã. Công việc đầu tiên là thiết lập các biến và các hằng số mô tả vấn đề.Đoạn mã sau được tạo bên ngoài bất kỳ hàm nào vì nó mô tả các giá trị sẽ được chia sẻ giữa các hàm:

var drawing; var con; var goofyPic; var angle = 0; CANV_HEIGHT = 200; CANV_WIDTH = 200; SPR_HEIGHT = 50; SPR_WIDTH = 40;

Biến vẽ sẽ đề cập đến phần tử canvas. Biến Con sẽ là ngữ cảnh của bản vẽ, goofyPic là hình ảnh được xoay, và góc sẽ được sử dụng để xác định xem hình ảnh hiện đang được xoay như thế nào. Các giá trị khác là các hằng số được sử dụng để mô tả chiều cao và chiều rộng của vải cũng như tinh quái.

Triển khai hoạt ảnh trong vải HTML5

Sử dụng cơ chế tải trên cơ thể để bắt đầu một số mã ngay khi trang đã tải xong. Tuy nhiên, trang bây giờ có hai chức năng. Các init () chức năng xử lý khởi tạo, và các draw () chức năng sẽ được gọi là liên tục để xử lý hình ảnh động thực tế. Dưới đây là mã trong hàm init ():

function init () {drawing = document. getElementById ("bản vẽ"); con = bản vẽ. getContext ("2d"); goofyPic = tài liệu. getElementById ("goofyPic"); setInterval (draw, 100);} // end init

Công việc của hàm init () là khởi tạo mọi thứ. Trong ví dụ cụ thể này, các yếu tố khác nhau (khung cảnh, khung cảnh và hình ảnh) được nạp vào các biến JavaScript, và hoạt ảnh được thiết lập. Hàm setInterval () được sử dụng để thiết lập vòng lặp hoạt hình chính. Phải mất hai thông số:

Một chức năng lặp lại:

• Tham số đầu tiên là tên của một chức năng sẽ được gọi lặp đi lặp lại. Trong trường hợp này, hàm vẽ sẽ được gọi nhiều lần. Giá trị trễ:

• Thông số thứ hai chỉ ra tần suất chức năng nên được gọi theo mili giây (1/1000 giây). Sự chậm trễ 100 sẽ tạo ra tốc độ khung hình 10 khung hình / giây. Sự chậm trễ 50 sẽ gây ra tốc độ khung hình là 20 khung hình / giây, v.v. Cho hình ảnh động đến khung hiện tại trong vải HTML5

Hàm vẽ () sẽ được gọi nhiều lần liên tiếp. Nhìn chung, nhiệm vụ của nó là xóa khung, tính toán các trạng thái sprite mới và vẽ lại sprite. Đây là đoạn code:

function draw () {// clear background con. fillStyle = "trắng"; con. fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH); / / vẽ biên giới con. strokeStyle = "đỏ"; con. lineWidth = "5"; con. strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT); // thay đổi góc góc quay + =. 25; nếu (góc> Toán PI * 2) {angle = 0;} / / bắt đầu một hệ thống chuyển đổi mới con. tiết kiệm(); con. dịch (100, 100); con. xoay (góc); / / vẽ hình con. drawImage (goofyPic, SPR_WIDTH / -2, SPR_HEIGHT / -2, SPR_WIDTH, SPR_HEIGHT); con. Khôi phục ();} // end draw

Mặc dù mã dường như có liên quan đến một chút nhưng nó không thực sự làm bất cứ điều gì mới:

Xóa nền.

1. Hãy nhớ rằng hình ảnh động được lặp lại bản vẽ. Nếu bạn không xóa nền ở đầu mỗi khung, bạn sẽ thấy các bản vẽ khung trước đó. Sử dụng chức năng clearRect () của ngữ cảnh để vẽ một nền tươi, hoặc một trong các công cụ vẽ khác để sử dụng một hình nền phức tạp hơn.

   Vẽ bất kỳ nội dung không phù hợp.

2. Ví dụ: bạn có thể sử dụng strokeStyle, lineWidth và strokeRect () để tạo khung hình chữ nhật màu đỏ xung quanh vải. Lưu ý rằng CANV_HEIGHT và CANV_WIDTH hằng số tham chiếu đến kích thước vải hiện tại.

   Sửa đổi trạng thái ma thuật.

3. Để sửa đổi góc quay của hình ảnh trong ví dụ, biến được gọi là góc đã được tạo ra bên ngoài hàm. (Điều quan trọng là góc được tạo ra bên ngoài ngữ cảnh chức năng để nó có thể giữ lại giá trị giữa các cuộc gọi đến hàm). Sau đó, bạn có thể thêm một lượng nhỏ vào góc cho mỗi khung.

   Bất cứ khi nào bạn thay đổi một biến (đặc biệt là trong một vòng lặp vô tận như một hình ảnh động), bạn nên kiểm tra các điều kiện biên. Giá trị góc chấp hành lớn nhất (tính bằng radian) là hai lần pi. Nếu góc lớn hơn đó, nó sẽ reset lại bằng không.

   Xây dựng một sự chuyển đổi. Thiết lập một phép biến đổi mới với phương thức save () và sử dụng các chức năng quay () và translate () để chuyển đổi một hệ tọa độ tạm thời.

4. Nhiều hình động hoạt động thực sự là sửa đổi của một sự chuyển đổi. Hình ảnh không thay đổi, chỉ là chuyển đổi có chứa hình ảnh.

   Vẽ hình ảnh ở giữa của sự chuyển đổi mới.

5. Lệnh drawImage () vẽ hình ảnh dựa trên góc trên cùng bên trái của một hình ảnh. Nếu bạn vẽ hình ảnh ở (0, 0) của phép chuyển đổi mới, hình ảnh sẽ xuất hiện xoay quanh góc trên bên trái của nó. Thông thường, bạn sẽ muốn một hình ảnh xoay quanh điểm trung tâm. Đơn giản chỉ cần vẽ hình ảnh để trung tâm của nó là ở nguồn gốc. Đặt X thành zero trừ đi một nửa chiều rộng của hình ảnh, và Y để không trừ đi một nửa chiều cao của hình ảnh.

   Đóng quá trình chuyển đổi. Sử dụng phương thức restore () để kết thúc xác định hệ tọa độ tạm thời.