Trang Chủ Xã hội Truyền thông Làm thế nào để tạo hoạt hình với HTML5 Canvas Tag - núm vú

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

Mục lục:

Video: Thẻ canvas và cách sử dụng (HTML bài 43) 2025

Video: Thẻ canvas và cách sử dụng (HTML bài 43) 2025
Anonim

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.

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

Lựa chọn của người biên tập

Mang quà Hostess - núm vú

Mang quà Hostess - núm vú

Khi bạn được mời đến nhà của người khác, cho chủ nhà một món quà nhỏ được gọi là quà tặng chủ nhà) luôn là một cử chỉ tốt đẹp, ngay cả khi lời mời không hướng dẫn bạn. Với một chai rượu vang, một cây có hoa, hoặc một món ăn ngon thì đây là một cách đáng để bạn thể hiện sự đánh giá cao của bạn và thể hiện sự xuất sắc của khách mời ...

Trao quyền cho bản thân bằng cách tốt - những con voi

Trao quyền cho bản thân bằng cách tốt - những con voi

Dù bạn gọi nó là gì - cách cư xử, lịch thiệp, nghi thức, bạn có thể kết hợp nó với sự lãnh đạo. Khi bạn dẫn đầu trong việc làm cho mọi người dễ dàng và làm cho mọi tình huống dễ chịu, bạn thể hiện sự cân bằng. Sự trầm cảm đến từ sự tự tin. Trong khí hậu ngày nay, nghi thức và tục tĩu đôi khi được coi là hổ thẹn. Những người khác xem ...

Nhận ra nỗ lực của Người cao tuổi để giấu cảm xúc khó chịu - những con voi

Nhận ra nỗ lực của Người cao tuổi để giấu cảm xúc khó chịu - những con voi

Con người thường tự bảo vệ bản thân mình khỏi nỗi đau của riêng mình cảm xúc (bao gồm lo lắng, oán giận, thất vọng và trầm cảm) bằng cách che giấu những cảm xúc này - từ bản thân và từ người khác. Họ thường làm như vậy mà không hề biết rằng họ đang làm việc đó. Người cao niên cũng không ngoại lệ. Ẩn cảm xúc không phải lúc nào cũng là điều xấu - có thể là ...

Lựa chọn của người biên tập

Mạng Cisco: Mô hình OSI Lớp 5 - Lớp Session - Dummies

Mạng Cisco: Mô hình OSI Lớp 5 - Lớp Session - Dummies

Lớp phiên của Kết nối Hệ thống Mở (Open System Interconnection) (OSI) mô tả cách thức dữ liệu được định dạng giữa các thiết bị ở hai bên của liên kết. Đây là cách thức hiệu quả trong việc duy trì kênh mở giữa hai thiết bị. Tuy nhiên, ở các mức thấp của mô hình OSI, không có kết nối vĩnh viễn, nhưng ...

Cisco Các mạng: Gói - núm vú

Cisco Các mạng: Gói - núm vú

Các bộ chứa dữ liệu được gọi là các khung trong lớp liên kết dữ liệu (Lớp 2) và các gói trong lớp mạng (lớp 3). Trong lớp mạng, bạn chỉ nhìn vào phần của khung được gọi là dữ liệu trong khung Ethernet. Khi khung Ethernet di chuyển lên từ lớp liên kết dữ liệu tới ...

Cisco Mạng: Mô hình Mô hình Mạng OSI - núm vú

Cisco Mạng: Mô hình Mô hình Mạng OSI - núm vú

Tổ chức Tiêu chuẩn hoá Quốc tế (ISO) thiết bị phải được thiết kế để giao tiếp với nhau. ISO đã đề xuất mô hình mạng cho phép truyền thông này diễn ra, và mặc dù điều này là tốt từ một mức độ lý thuyết, nó không phải luôn luôn theo sau, đặc biệt là kể từ khi nó được xuất bản sau nhiều mạng ...

Lựa chọn của người biên tập

Lập trình Java cho Android: Cài đặt Công cụ Phần mềm để Bắt đầu - những người có đầu

Lập trình Java cho Android: Cài đặt Công cụ Phần mềm để Bắt đầu - những người có đầu

Trước khi bạn có thể viết Các chương trình Java cho các thiết bị Android, bạn cần một số công cụ phần mềm. Nếu bạn là một tay cũ để cài đặt phần mềm, và nếu máy tính của bạn không phải là quirky, các bước này có lẽ sẽ phục vụ bạn tốt. Truy cập trang web Lập trình Java dành cho Nhà phát triển Android for Dummies và tải xuống tệp có chứa các ví dụ về chương trình. Truy cập Java ...

Java Lập trình Thách thức: Thực hiện lại Tháp Hà Nội - đầu

Java Lập trình Thách thức: Thực hiện lại Tháp Hà Nội - đầu

Thách thức này giúp bạn sử dụng tài năng lập trình của mình để viết một chương trình Java sẽ in các bước cần thiết để giải quyết một tháp Towers của Hà Nội puzzle cho số lượng đĩa. Tháp Hà Nội là một câu đố logic cổ điển bao gồm ba chốt đứng và một số đĩa có đường kính khác nhau. Mỗi

Java: lặp lại và For Vòng lặp - núm vú

Java: lặp lại và For Vòng lặp - núm vú

Trong Java, giống như trong thế giới thực, có rất nhiều lần khi bạn lặp lại một cái gì đó. Tương tự như vậy, các ứng dụng có nhu cầu lặp lại nhiệm vụ. Thực hiện chúng một lần là không đủ, trong một số trường hợp. Chương này giúp bạn hiểu cách thực hiện cùng một nhiệm vụ nhiều lần. Một vòng lặp lặp đi lặp lại bao gồm một cấu trúc đặc biệt theo dõi khi nào ...