Комментарий: сначала приготовьте изображение с непрерывными кадрами, а затем используйте метод рисования HTML5 Canvas ', чтобы нарисовать разные кадры с разными интервалами времени. Таким образом, похоже, что анимация играет. Ключевые технические точки и примеры кодов заключаются в следующем. Заинтересованные друзья могут ссылаться на это. Я надеюсь, что это будет полезно для всех.
Демонстрация эффекта анимации HTML5 CanvasОсновные идеи:
Сначала приготовьте картинку с непрерывными кадрами, а затем используйте метод рисования HTML5 Canvas ', чтобы нарисовать разные кадры с разными интервалами во времени, чтобы она выглядела так, будто играет анимация.
Ключевые технические моменты:
Javascript function settimeout () имеет два параметра. Во -первых, параметр может пройти метод JavaScript.
Другой параметр представляет время интервала в миллисекундах. Пример кода:
SetTimeout (обновление, 1000/30);
Метод Canvas 'api-drawimage () требует всех 9 параметров:
ctx.drawimage (myimage, offw, offh, ширина, высота, x2, y2, ширина, высота);
где Offw и Off
Показывает начальную точку координаты исходного изображения на целевом холсте.
Эффект 22-карманной картины по лету:
Изображение источника:
Код программы:
<! Doctype html>
<html>
<голова>
<meta http-equiv = "x-ua-совместимый" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<Title> Canvas Mouse Event Demo </title>
<link href = "default.css" />
<Скрипт>
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 («Canvas не поддерживается. Пожалуйста, установите браузер, совместимый с HTML5.»);
возвращаться;
}
// Получить 2D контекста холста и нарисовать прямоугольник
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 height = myimage.naturalheight/5;
var width = myimage.naturalwidth/5;
var row = math.floor (кадр / 5);
var col = frame - row * 5;
var offw = col * ширина;
var offH = row * высота;
// Первый Робин
px = px - 5;
py = py - 5;
if (px <-50) {
px = 300;
}
if (py <-50) {
py = 300;
}
// var Щитка = (кадр+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, ширина, высота);
}
функция update () {
RedRaw ();
кадр ++;
if (Frame> = 22) Frame = 0;
SetTimeout (обновление, 1000/30);
}
</script>
</head>
<тело>
<H1> HTML Canvas Animation Demo - Mroomy Fish </H1>
<pre> Играть в анимацию </pre>
<div>
<Canvas> </canvas>
</div>
</body>
</html>
Я обнаружил, что была проблема с загрузкой прозрачного формата PNG, поэтому я загрузил непрозрачные картинки. Вы можете заменить его на другие картинки. После замены, пожалуйста, измените максимальное количество кадров с 22 до вашего фактического количества кадров для запуска.