javascript – 如何使用Canvas放置一个gif

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用Canvas放置一个gif前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在制作一款游戏,在我的游戏中,当HERO停留在MONSTER附近时,会显示一个GIF来吓唬玩家.但我不知道该怎么做.我试图把 PHPHTML代码,但它不起作用…函数是AtualizaTela2().这是我的主要代码: @H_404_2@<!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); 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>

这是简化的代码,因为真正的代码非常大!

谢谢您的帮助!

猜你在找的JavaScript相关文章