ความคิดเห็น: ก่อนอื่นเตรียมรูปภาพด้วยเฟรมต่อเนื่องจากนั้นใช้วิธีการวาด HTML5 Canvas 'เพื่อวาดเฟรมที่แตกต่างกันในช่วงเวลาที่แตกต่างกัน ด้วยวิธีนี้ดูเหมือนว่าแอนิเมชั่นกำลังเล่นอยู่ ประเด็นทางเทคนิคที่สำคัญและรหัสตัวอย่างมีดังนี้ เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน
การสาธิตเอฟเฟกต์แอนิเมชั่น HTML5 Canvasแนวคิดหลัก:
ก่อนอื่นเตรียมรูปภาพด้วยเฟรมต่อเนื่องจากนั้นใช้วิธีการวาด HTML5 Canvas 'เพื่อวาดเฟรมที่แตกต่างกันในช่วงเวลาที่แตกต่างกันเพื่อให้ดูเหมือนว่าภาพเคลื่อนไหวกำลังเล่นอยู่
ประเด็นทางเทคนิคที่สำคัญ:
ฟังก์ชั่น JavaScript settimeout () มีสองพารามิเตอร์ อย่างแรกคือพารามิเตอร์สามารถผ่านวิธี JavaScript
พารามิเตอร์อื่นแสดงถึงช่วงเวลาในมิลลิวินาที ตัวอย่างรหัส:
settimeout (อัปเดต, 1000/30);
เมธอด API-DRAWIMAGE () Canvas ต้องการพารามิเตอร์ทั้งหมด 9 พารามิเตอร์:
CTX.DrawImage (MyImage, OffW, Offh, ความกว้าง, ความสูง, x2, y2, ความกว้าง, ความสูง);
โดยที่ OffW และ Offh อ้างถึงจุดพิกัดเริ่มต้นของภาพต้นทางความกว้างและความสูงแสดงถึงความกว้างและความสูงของภาพต้นทาง, ตาราง x2 และ y2
แสดงจุดพิกัดเริ่มต้นของภาพต้นทางบนผืนผ้าใบเป้าหมาย
ผลของภาพการบินห่านป่า 22 เฟรม:
ภาพต้นทาง:
รหัสโปรแกรม:
<! doctype html>
<html>
<head>
<meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> การสาธิตเหตุการณ์เมาส์ Canvas </title>
<link href = "default.css" />
<script>
var ctx = null; // บริบท 2D ตัวแปรส่วนกลาง
var เริ่มต้น = false;
var mtext_canvas = null;
var x = 0, y = 0;
var frame = 0; // 22 5*5 + 2
var imageReady = false;
var myimage = null;
var px = 300;
var py = 300;
var x2 = 300;
var y2 = 0;
window.onload = function () {
var canvas = document.getElementById ("animation_canvas");
console.log (canvas.parentNode.ClientWidth);
canvas.width = canvas.parentNode.ClientWidth;
Canvas.height = Canvas.parentNode.Clientheight;
if (! canvas.getContext) {
console.log ("ไม่รองรับผืนผ้าใบโปรดติดตั้งเบราว์เซอร์ที่เข้ากันได้ HTML5");
กลับ;
-
// รับบริบท 2D ของผ้าใบและวาด rectangel
ctx = canvas.getContext ("2d");
ctx.fillstyle = "ดำ";
ctx.fillrect (0, 0, canvas.width, canvas.height);
myImage = document.createElement ('img');
myimage.src = "../robin.png";
myimage.onload = loaded ();
-
ฟังก์ชั่นโหลด () {
imageReady = true;
settimeout (อัปเดต, 1000/30);
-
ฟังก์ชั่น redraw () {
ctx.clearrect (0, 0, 460, 460)
ctx.fillstyle = "ดำ";
ctx.fillrect (0, 0, 460, 460);
// ค้นหาดัชนีของเฟรมในภาพ
ความสูง var = myimage.naturalheight/5;
var width = myimage.naturalWidth/5;
var row = math.floor (เฟรม / 5);
var col = เฟรม - แถว * 5;
var offw = col * ความกว้าง;
var offh = row * ความสูง;
// First Robin
px = px - 5;
py = py - 5;
if (px <-50) {
px = 300;
-
ถ้า (py <-50) {
PY = 300;
-
// var rate = (เฟรม+1) /22;
// var rw = math.floor (อัตรา * ความกว้าง);
// var rh = math.floor (อัตรา * ความสูง);
CTX.DrawImage (MyImage, OffW, Offh, ความกว้าง, ความสูง, PX, PY, ความกว้าง, ความสูง);
// โรบินที่สอง
x2 = x2 - 5;
y2 = y2 + 5;
ถ้า (x2 <-50) {
x2 = 300;
y2 = 0;
-
CTX.DrawImage (MyImage, OffW, Offh, ความกว้าง, ความสูง, x2, y2, ความกว้าง, ความสูง);
-
ฟังก์ชั่นอัปเดต () {
วาดใหม่ ();
เฟรม ++;
ถ้า (เฟรม> = 22) เฟรม = 0;
settimeout (อัปเดต, 1000/30);
-
</script>
</head>
<body>
<H1> การสาธิตแอนิเมชั่น HTML Canvas - โดยปลาที่มืดมน </h1>
<pre> เล่นแอนิเมชั่น </pre>
<div>
<Canvas> </sanvas>
</div>
</body>
</html>
ฉันพบว่ามีปัญหาเกี่ยวกับการอัปโหลดรูปแบบ PNG ที่โปร่งใสดังนั้นฉันจึงอัปโหลดรูปภาพทึบแสง คุณสามารถแทนที่ด้วยรูปภาพอื่น ๆ หลังจากการแทนที่โปรดแก้ไขจำนวนเฟรมสูงสุดจาก 22 เป็นจำนวนเฟรมจริงของคุณที่จะเรียกใช้