美文网首页工作生活
canvas之绘制图片

canvas之绘制图片

作者: 小透明进击战 | 来源:发表于2019-06-30 20:31 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            border: 1px solid #eeeeee;
            display: block;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<canvas width="600px" height="400px"></canvas>
<script>
    //构造函数
    var Person=function(ctx){
        this.ctx=ctx||document.querySelector('canvas').getContext('2d');
        //图片的路径
        this.src='./image/04.png';
        //获取画布的大小
        this.w=this.ctx.canvas.width;
        this.h=this.ctx.canvas.height;
        //方向,前0 左1 右2 后3
        this.direction=0;
        //步长
        this.steplength=10;
        //x轴的偏移步数
        this.stepX=0;
        //y轴的偏移步数
        this.stepY=0;



    };
    //小人初始化
    Person.prototype.init=function(){
        var that=this;
        this.onLoad(function(imgObj){
            //获取精灵图中的图的大小
            that.imgWidth=imgObj.width;
            that.imgHeight=imgObj.height;

            //获取人的大小
            that.perW=that.imgWidth/4;
            that.perH=that.imgHeight/4;
            //画布正中心画小人
            that.x0=that.w/2-that.perW/2;
            that.y0=that.h/2-that.perH/2;
            //展现小人
            that.ctx.drawImage(imgObj,0,0,that.perW,that.perH,that.x0,that.y0,that.perW,that.perH);
            //图片中每一行的下标
            that.index=0;
            //通过方向控制小人的行走
            document.onkeydown=function(e){
                console.log(e.keyCode);
                    //向前
                if(e.keyCode===40){
                    that.direction=0;
                    that.stepY++;
                    that.drawImage(imgObj);
                    //向左
                }else if(e.keyCode===37){
                    that.direction=1;
                    that.stepX--;
                    that.drawImage(imgObj);
                    //向右
                }else if(e.keyCode===39){
                    that.direction=2;
                    that.stepX++;
                    that.drawImage(imgObj);
                    //向后
                }else if(e.keyCode===38){
                    that.direction=3;
                    that.stepY--;
                    that.drawImage(imgObj);
                }

            };

        });


    };
    //加载图片
    Person.prototype.onLoad=function(callback){
        var imgObj=new Image();
        imgObj.onload=function(){
            callback&&callback(imgObj);
        };
        imgObj.src=this.src;
    };
    //绘制图片
    Person.prototype.drawImage=function(imgObj){
        this.index++;
        //先清理画布中的图片
        this.ctx.clearRect(0,0,this.w,this.h);
        //绘制图片
        this.ctx.drawImage(imgObj,
                this.index*this.perW,this.direction*this.perH,
                this.perW, this.perH,
                this.x0+this.stepX*this.steplength,this.y0+this.stepY*this.steplength,
                this.perW,this.perH);
        if(this.index>=3){
            this.index=0;
        }
    };
    var perObj=new Person();
    perObj.init();
</script>
</body>
</html>

相关文章

网友评论

    本文标题:canvas之绘制图片

    本文链接:https://www.haomeiwen.com/subject/dvxicctx.html