unity怎么把canvas做成小地图

1.首先在Canvas画布下新建一个空的GameObject，改名为Mask，该组件实现地图的遮罩功能。

2.在Mask下添加RawImage，实现小地图的动态显示。

3.在角色对象上添加一个子对象Sprite，改名为Icon，实现角色移动时候的箭头显示。在Sprite上添加一个自己PS的箭头，并且调整Sprite的大小和位置。

4.创建一个相机，命名为Minimap_Camera，用来追踪小地图。摄像机位置设置在角色正上方X轴90度，调整高度。调整相机只显示，主摄像机Culling Mask不显示Icon。新建一个Render Texture托给Minimap_Camera的Target Texture。

5.下面为Minimap_Camera加个简单脚本，用来跟踪Icon（箭头）。

<script>

      var Person = function(canvas){

        this.ctx = document.querySelector("canvas").getContext("2d")

        this.canvasWidth = this.ctx.canvas.width

        this.canvasHeight = this.ctx.canvas.height

        this.src = "image/04.png"

        this.init()

      }

      Person.prototype.init = function(){

        var that = this

        this.loadImage(function(image){

          // 获取图片的宽高

          that.imageWidth = image.width

          that.imageHeight = image.height

          // 获取单个小怪兽区域的宽高

          that.positionWidth = that.imageWidth / 4

          that.positionHeight = that.imageHeight / 4

          // 默认是从左上角显示的

          that.x0 = that.canvasWidth / 2 - that.positionWidth / 2

          that.y0 = that.canvasHeight / 2 - that.positionHeight / 2

          // 绘制图片

          that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,

            that.y0, that.positionWidth, that.positionHeight)

        })

      }

      Person.prototype.loadImage = function(callback){

        var image = new Image()

        // 图片加载完成后执行

        image.onload = function(){

          callback &&callback(image)

        }

        image.src = this.src

      }

      var person = new Person()

    </script>

三、绘制小人行走的帧动画

<s<script>

        var Person = function(canvas){

          this.ctx = document.querySelector("canvas").getContext("2d")

          this.canvasWidth = this.ctx.canvas.width

          this.canvasHeight = this.ctx.canvas.height

          this.src = "image/04.png"

          this.init()

        }

        Person.prototype.init = function(){

          var that = this

          this.loadImage(function(image){

            // 获取图片的宽高

            that.imageWidth = image.width

            that.imageHeight = image.height

            // 获取单个小怪兽区域的宽高

            that.positionWidth = that.imageWidth / 4

            that.positionHeight = that.imageHeight / 4

            // 默认是从左上角显示的

            that.x0 = that.canvasWidth / 2 - that.positionWidth / 2

            that.y0 = that.canvasHeight / 2 - that.positionHeight / 2

            // 绘制图片

            that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,

              that.y0, that.positionWidth, that.positionHeight)

            var index = 0

            setInterval(function(){

              that.ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight)

              index++

              that.ctx.drawImage(image, index * that.positionWidth, 0, that.positionWidth, that.positionHeight, that.x0, that.y0,<br>that.positionWidth, that.positionHeight)

              if(index >= 3){

                index = 0

              }

            }, 100)

          })

        }

        Person.prototype.loadImage = function(callback){

          var image = new Image()

          // 图片加载完成后执行

          image.onload = function(){

            callback &&callback(image)

          }

          image.src = this.src

        }

        var person = new Person()

      </script>

四、绘制疾走的小怪兽

可以通过键盘上下左右键控制小人在画布中任意行走

nction(canvas){

        this.ctx = document.querySelector("canvas").getContext("2d")

        this.canvasWidth = this.ctx.canvas.width

        this.canvasHeight = this.ctx.canvas.height

        this.stepX = 0

        this.stepY = 0

        this.stepSize = 10

        this.index = 0

        this.direction = 0

        this.src = "image/04.png"

        this.init()

      }

      Person.prototype.init = function(){

        var that = this

        this.loadImage(function(image){

          // 获取图片的宽高

          that.imageWidth = image.width

          that.imageHeight = image.height

          // 获取单个小怪兽区域的宽高

          that.positionWidth = that.imageWidth / 4

          that.positionHeight = that.imageHeight / 4

          // 默认是从左上角显示的

          that.x0 = that.canvasWidth / 2 - that.positionWidth / 2

          that.y0 = that.canvasHeight / 2 - that.positionHeight / 2

          // 绘制图片

          that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,

            that.y0, that.positionWidth, that.positionHeight)

          var index = 0

          document.onkeydown = function(e){

            that.ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight)

            switch(e.keyCode){

              case 37 :

                console.log('左')

                that.direction = 1

                that.stepX--

                that.showImage(image)

                break

              case 38 :

                console.log('上')

                that.direction = 3

                that.stepY--

                that.showImage(image)

                break

              case 39 :

                console.log('右')

                that.direction = 2

                that.stepX++

                that.showImage(image)

                break

              case 40 :

                console.log('下')

                that.direction = 0

                that.stepY++

                that.showImage(image)

                break

            }

          }

        })

      }

      Person.prototype.loadImage = function(callback){

        var image = new Image()

        // 图片加载完成后执行

        image.onload = function(){

          callback &&callback(image)

        }

        image.src = this.src

      }

      Person.prototype.showImage = function(image){

        this.index++

        console.log(this.index)

          this.ctx.drawImage(image, this.index * this.positionWidth, this.direction * this.positionHeight, this.positionWidth, this.positionHeight, this.x0 + this.stepX * this.stepSize, this.y0 + this.stepY * this.stepSize, this.positionWidth, this.positionHeight)

          if(this.index >= 3){

            this.index = 0

          }

      }

      var person = new Person()

    </script>

深圳网站建设www.sz886.com

---