Fatal编程技术网
  • javascript/
  • Javascript 如何在画布上放置gif

Javascript 如何在画布上放置gif

javascript html canvas

Javascript 如何在画布上放置gif,javascript,html,canvas,gif,Javascript,Html,Canvas,Gif,我正在创建一个游戏，在我的游戏中，当英雄停留在怪物附近时，会显示一个gif来吓唬玩家。但我不知道怎么做。我试图把PHP或HTML代码，但它不工作。。。该函数是AtualizaTela2（）。这是我的主要代码： <!DOCTYPE HTML> <html> <head> <title>Hero's Escape Game</title> <script language="JavaScript" type="text/javascr

我正在创建一个游戏，在我的游戏中，当英雄停留在怪物附近时，会显示一个gif来吓唬玩家。但我不知道怎么做。我试图把PHP或HTML代码，但它不工作。。。该函数是
AtualizaTela2（）
。这是我的主要代码：

<!DOCTYPE HTML>
<html>
<head>
<title>Hero's Escape Game</title>
<script language="JavaScript" type="text/javascript">

var objCanvas=null; // object that represents the canvas
var objContexto=null; 

// Hero positioning control
var xHero=300;
var yHero=100;

// Monster positioning control
var xMonster=620;
var yMonster=0;

var imgFundo2 = new Image();
imgFundo2.src = "Images/Pista2.png";

var imgMonster = new Image();
imgMonster.src = "Images/Monster.png";

var imgHero = new Image();
imgHero.src = "Images/Hero.png";

function AtualizaTela2(){

if((xHero >= xMonster-10)&&(xHero <= xMonster + 10))
{

/*gif here*/

}

objContexto.drawImage(imgFundo2,0,0);
objContexto.drawImage(imgHero, xHero, yHero);
objContexto.drawImage(imgMonster, xMonster, yMonster);

function Iniciar(){

objCanvas = document.getElementById("meuCanvas");
objContexto = objCanvas.getContext("2d");
AtualizaTela2();

}

/* the function HeroMovement() and MonsterMovement() are not here */

}

</script>
</head>
<body onLoad="Iniciar();" onkeydown="HeroMovement(event);">

<canvas id="meuCanvas" width="1233"
height="507"
style="border:1px solid #000000;">
Seu browser não suporta o elemento CANVAS, atualize-se!!!
</canvas><BR>
</body>
</html>


英雄逃脱游戏
var objCanvas=null；//表示画布的对象
var objContexto=null；
//英雄定位控制
var xHero=300；
var-yHero=100；
//怪物定位控制
var xMonster=620；
var-yMonster=0；
var imgFundo2=新图像（）；
imgFundo2.src=“Images/Pista2.png”；
var imgMonster=新图像（）；
imgMonster.src=“Images/Monster.png”；
var imgHero=新图像（）；
imgHero.src=“Images/Hero.png”；
函数AtualizaTela2（）{

如果（（xHero>=xMonster-10）和&（xHero我也不太确定您的问题是什么，但不是：


if((xHero >= xMonster-10)||(xHero <= xMonster + 10))
{

/*gif here*/

}



if（（xHero>=xMonster-10）| |（xHero=xMonster-10&&xHero只需在画布上插入gif的任意位置绘制图像。我假设您要在画布中插入gif
meuCanvas

因此：


if（（xHero>=xMonster-10）和&（xHero不可能简单地在
元素上绘制
.gif
（动画！）。
你有两个选择

a） 您可以将
.gif
（通过
节点）附加到
中的
然后将Vist<代码> Z索引< /代码>和<代码> CSS Tope/Leave/Cult>在<代码>中，在正确的位置上，它最终会把鼠标事件搞乱，这可以通过事件传播来解决。我认为这是一个很差的解决方案。

b） 你需要学习如何制作动画。查找
窗口。requestAnimationFrame
方法。这样做将允许你在
上制作动画，它可以模拟你正在寻找的
.gif
行为。不过，我认为在你当前的级别上，它会有点复杂

您可以像上面描述的海报一样在
画布上绘制
.gif
。但是，在这种情况下，它将是100%静态的，就像
.jpg
或
.png
，除非您设法将
.gif
分解到其框架中，并且仍然使用
窗口.requestAnimationFrame
方法


基本上，如果您想要一个
.gif
的动画行为，您需要进行重大调整。
您可以在Github上使用Gify&gifuct js项目

首先，下载动画gif并准备在页面加载时执行此操作所需的图像


var framesArray;
var currentFrame = 0;
var totalFrames = null;

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.gif", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if(gify.isAnimated(arrayBuffer)){
      var gif = new GIF(arrayBuffer);
      framesArray = gif.decompressFrames(true);
      totalFrames = framesArray.length;
  }
};

oReq.send(null);


当希望动画在绘制循环中显示时


if((xHero >= xMonster-10)&&(xHero <= xMonster + 10)){
    // you need to work out from your frame rate when you should increase current frame 
    // based on the framerate of the gif image using framesArray[currentFrame].delay

    // auto-detect if we need to jump to the first frame in the loop 
    // as we gone through all the frames
    currentFrame = currentFrame % totalFrames;
    var frame = framesArray[currentFrame];
    var x,y;
    // get x posstion as an offset from xHero
    // get y posstion as an offset from yHero

    objContexto.putImageData(frame.patch,x,y);
}



if（（xHero>=xMonster-10）和&（xHero）将GIF图像加载并播放到画布。
抱歉，答案超出了大小限制，不得不删除许多详细的代码注释

由于整个过程相当复杂，我不打算详述

在画布上制作GIF动画的唯一方法是用javascript对GIF图像进行解码。幸运的是，该格式对于包含图像大小、颜色托盘、计时信息、注释字段和帧绘制方式的块中排列的数据并不太复杂

自定义GIF加载和播放。
下面的示例包含一个名为
GIF
的对象，该对象将从URL创建自定义格式的GIF图像，该URL可以播放类似于视频播放方式的GIF。您还可以按任意顺序随机访问所有GIF帧

有许多回调和选项。注释中有基本的用法信息，代码显示了如何加载gif。有用于暂停和播放的函数，
seek（timeInSeconds）
和
seekFrame（frameNumber）
，用于控制
播放速度的属性
等。由于访问是即时的，因此不存在往返事件


 var myGif = GIF();
 myGif.load("GIFurl.gif");


一旦加载


 ctx.drawImage(myGif.image,0,0); // will draw the playing gif image


或者通过
帧
缓冲区访问帧


 ctx.drawImage(myGif.frames[0].image,0,0); // draw frame 0 only.


转到GIF对象的底部，查看带有注释的所有选项

GIF必须是同一域或具有CORS标头

演示中的gif来自并包含250多个帧，一些低端设备会遇到此问题，因为每个帧都转换为完整的RGBA图像，使得加载的gif大大大于gif文件大小

演示
加载gif，显示加载时的帧数和帧数。
加载100个粒子时，背景中会显示每个粒子以独立速度和方向播放的随机访问帧

前景图像是以嵌入在文件中的帧速率播放的gif

代码保持原样，仅作为示例，不用于商业用途



const ctx=canvas.getContext（“2d”）；
var-myGif；
//除非具有CORS标头，否则无法跨域加载gif
常量gifull=”https://upload.wikimedia.org/wikipedia/commons/a/a2/Wax_fire.gif";
//超时只是等待脚本被解析并执行
//然后开始加载gif文件
设置超时（（）=>{
myGif=GIF（）；//创建新的GIF
myGif.onerror=函数（e）{
console.log（“Gif加载错误”+e.type）；
}
myGif.load（gifull）；
},0); 
//函数绘制图像
函数drawImage（图像、x、y、缩放、旋转）{
设置变换（比例，0,0，比例，x，y）；
旋转（旋转）；
ctx.drawImage（image，-image.width/2，-image.height/2）；
}
//辅助函数
常量rand=（min=1，max=min+（min=0））=>Math.random（）*（max-min）+min；
常数setOf=（c，c）=>{var a=[]，i=0；而（i{var i=0；常数l=a.length；而（i（（v%m）+m）%m；
//创建100个粒子
常数粒子=集合（100，（）=>{
返回{
x:rand（内部宽度），
y:rand（内部高度），
刻度：兰特（0.15,0.5），
rot:rand（数学PI*2），
帧：0，
帧率：兰特（-2,2），
博士：兰特（-0.1,0.1），
dx:rand（-4,4），
dy:rand（-4,4），
};
});
//设置并绘制100个粒子的动画
函数drawParticles（）{
每个（粒子，部分=>{
part.x+=part.dx；
part.y+=part.dy；

 ctx.drawImage(myGif.image,0,0); // will draw the playing gif image



 ctx.drawImage(myGif.frames[0].image,0,0); // draw frame 0 only.



var Img = [];
for (var i = 0; i < 28; i++) {
  Img[i] = new Image();
  Img[i].src = "http://lol.com/Img"+i+".png";
}