تعليق: أولاً ، قم بإعداد صورة بأطر مستمرة ، ثم استخدم طريقة رسم HTML5 Canvas لرسم إطارات مختلفة على فترات زمنية مختلفة. بهذه الطريقة ، يبدو أن الرسوم المتحركة تلعب. النقاط الفنية الرئيسية ورموز المثال هي كما يلي. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون ذلك مفيدًا للجميع.
HTML5 Canvas Effect Effect Effectالأفكار الرئيسية:
أولاً ، قم بإعداد صورة مع إطارات مستمرة ، ثم استخدم طريقة سحب HTML5 Canvas لرسم إطارات مختلفة على فترات زمنية مختلفة ، بحيث يبدو أن الرسوم المتحركة يتم تشغيلها.
النقاط الفنية الرئيسية:
وظيفة JavaScript SetTimeOut () لديها معلمتان. الأول هو أن المعلمة يمكنها تمرير طريقة JavaScript.
تمثل معلمة أخرى وقت الفاصل الزمني ، بالميلي ثانية. مثال رمز:
setTimeout (تحديث ، 1000/30) ؛
تتطلب طريقة القماش 'API-DRAWIRMAGE () جميع المعلمات التسعة:
ctx.drawimage (myimage ، Offw ، Offh ، العرض ، الارتفاع ، x2 ، y2 ، العرض ، الارتفاع) ؛
حيث يشير Offw و Offh إلى نقطة تنسيق البداية لصورة المصدر والعرض والارتفاع يمثلان عرض وارتفاع صورة المصدر ، جداول x2 و y2
يوضح نقطة تنسيق البداية لصورة المصدر على قماش الهدف.
تأثير صورة طيران أوزة برية 22 إطارًا:
صورة المصدر:
رمز البرنامج:
<! doctype html>
<html>
<head>
<meta http-equiv = "x-ua compatible" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<title> Canvas Mouse Event Demo </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.") ؛
يعود؛
}
// احصل على سياق ثنائي الأبعاد من القماش ورسم مستطيلة
ctx = canvas.getContext ("2d") ؛
ctx.fillStyle = "Black" ؛
ctx.fillRect (0 ، 0 ، canvas.width ، canvas.height) ؛
myimage = document.createElement ('img') ؛
myimage.src = "../robin.png" ؛
myimage.onload = loaded () ؛
}
وظيفة تحميل () {
Imageready = صحيح ؛
setTimeout (تحديث ، 1000/30) ؛
}
وظيفة redraw () {
ctx.clearrect (0 ، 0 ، 460 ، 460)
ctx.fillStyle = "Black" ؛
CTX.FillRect (0 ، 0 ، 460 ، 460) ؛
// ابحث عن فهرس الإطارات في الصورة
var height = myimage.naturalHeight/5 ؛
var width = myimage.naturalWidth/5 ؛
var row = math.floor (frame / 5) ؛
var col = frame - row * 5 ؛
var offw = col * width ؛
var Offh = Row * الارتفاع ؛
// أول روبن
px = px - 5 ؛
PY = PY - 5 ؛
if (px <-50) {
px = 300 ؛
}
if (py <-50) {
PY = 300 ؛
}
// var rate = (Frame+1) /22 ؛
// var rw = math.floor (معدل * العرض) ؛
// var rh = math.floor (معدل * الارتفاع) ؛
ctx.drawimage (myimage ، Offw ، Offh ، العرض ، الارتفاع ، px ، py ، العرض ، الارتفاع) ؛
// روبن الثاني
x2 = x2 - 5 ؛
y2 = y2 + 5 ؛
if (x2 <-50) {
x2 = 300 ؛
y2 = 0 ؛
}
ctx.drawimage (myimage ، Offw ، Offh ، العرض ، الارتفاع ، x2 ، y2 ، العرض ، الارتفاع) ؛
}
تحديث الوظيفة () {
redraw () ؛
إطار ++ ؛
إذا (الإطار> = 22) الإطار = 0 ؛
setTimeout (تحديث ، 1000/30) ؛
}
</script>
</head>
<body>
<h1> html canvas الرسوم المتحركة Demo - بواسطة الأسماك القاتمة </h1>
<pre> لعب الرسوم المتحركة </pre>
<viv>
<Canvas> </tanvas>
</div>
</body>
</html>
لقد وجدت أن هناك مشكلة في تحميل تنسيق PNG شفاف ، لذلك قمت بتحميل الصور المعتمة. يمكنك استبداله بصور أخرى. بعد الاستبدال ، يرجى تعديل الحد الأقصى لعدد الإطارات من 22 إلى عدد إطاراتك الفعلي للتشغيل.