Canvas坦克在画布上移动

最新推荐文章于 2022-11-21 09:23:03 发布

Wangdanting123

最新推荐文章于 2022-11-21 09:23:03 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/Wangdanting123/article/details/52207216

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="position: absolute;top:50px;left:50px;">
    <canvas id="canvas" width="500" height="500">
        your browser does not support HTML5 Canvas.
    </canvas>
</div>
<script>
    window.addEventListener('load',eventWindowLoaded,false);
    function eventWindowLoaded(){
        canvasApp();
    }
    function canvasSupport(){
        return !!document.createElement("text").getContext;
    }
    function canvasApp(){
        if(!canvasSupport){
            return;
        }else{
            var theCanvas=document.getElementById("canvas");
            var context=theCanvas.getContext("2d");
        }


        var tileSheet=new Image();
        tileSheet.src='images/tanks_sheet.png';
        tileSheet.addEventListener('load',eventShipLoaded,false);
//        在画布上移动
        var dx=0;
        var dy=-1;
//        将会在拼图左上角的拼版坐标
        var x=50;
        var y=500;

        var animationFrames=[1,2,3,4,5,6,7,8];
        var frameIndex=0;

        function eventShipLoaded(){
            startUp();
        }

        function drawScreen(){
            context.fillStyle="#aaaaaa";
            context.fillRect(0,0,500,500);
            x=x+dx;
            y=y+dy;
            var sourceX=Math.floor(animationFrames[frameIndex]%8)*32;
            var sourceY=Math.floor(animationFrames[frameIndex]/8)*32;
            context.drawImage(tileSheet,sourceX,sourceY,32,32,x,y,32,32);

            frameIndex++;
            if(frameIndex==animationFrames.length){
                frameIndex=0;
            }
        }

        function startUp(){
            setInterval(drawScreen,100);
        }

    }
</script>
</body>
</html>