canvas绘制可控制的行走的小人

最新推荐文章于 2023-04-26 14:48:17 发布

$(薛定谔的喵)

最新推荐文章于 2023-04-26 14:48:17 发布

阅读量1.2k

点赞数 2

分类专栏： web前端文章标签： canvas绘制可控制的行走的小人键盘控制canvas canvas动画

本文链接：https://blog.csdn.net/chad97/article/details/83657666

版权

这篇博客介绍了如何利用HTML5 canvas结合键盘事件，创建一个可控制行走的小人动画。博主提供了素材图片、详细代码及最终实现的效果图。

摘要由CSDN通过智能技术生成

素材img

在这里插入图片描述

代码

 var Person = function (ctx) {
   
        /*绘制工具*/
        this.ctx = ctx || document.querySelector('canvas').getContext('2d');
        /*图片路径*/
        this.src = 'image/04.png';
        /*画布的大小*/
        this.canvasWidth = this.ctx.canvas.width;
        this.canvasHeight = this.ctx.canvas.height;

        /*行走相关参数*/
        this.stepSzie = 10;
        /* 0 前  1 左  2 右  3 后  和图片的行数包含的图片对应上*/
        this.direction = 0;
        /*x轴方向的偏移步数*/
        this.stepX = 0;
        /*y轴方向的偏移步数*/
        this.stepY = 0;

        /*初始化方法*/
        this.init();
    };

    Person.prototype