canvas中如何连续画多个高度和间距相同而宽度不同的矩形？

问题描述

问 题

我写了一个Map.js，用来创建矩形，代码如下:

(function(){
    var Map = window.Map = function(x,y){
        this.x = x;
        this.y = y;
        game.MapArr.push(this);
        // new Map(0,game.canvas.height * 0.7);
        // new Map(game.canvas.width,game.canvas.height * 0.7);
        // new Map(game.canvas.width, game.canvas.height * 0.7);
        // new Map(game.canvas.width*2, game.canvas.height * 0.7);

    }
    Map.prototype.render = function(){
        game.ctx.save();
        game.ctx.fillStyle = "black";
        // game.ctx.fillRect(this.x,this.y,100,100);
        game.ctx.fillRect(this.x,this.y,game.canvas.width * 0.9,game.canvas.height * 0.3);
        game.ctx.restore();
    }
})()

然后我在game类中创建十个Map对象并渲染，代码如下：

for(var i = 0; i < 10; i++){
   new Map(game.canvas.width * i, game.canvas.height * 0.7);
}
for (var i = 0; i < game.MapArr.length; i++) {
   game.MapArr[i] && game.MapArr[i].render();
}

这样的结果是连续生成多个等宽等高、间距相同的矩形。

而我的要求是要不等宽（用随机数生成）、等间距，这样一来画了第一个矩形后，第二个矩形的起始位置会受到前面的影响，第三个会受到第一个和第二个的影响，然而随机生成的数并不知道是多少。

请问怎么解决这个问题呢？

解决方案

你的代码有点莫名其妙哦，你每一个矩形的起点间隔是一个画布的距离（game.canvas.width），第二个矩形和后面的矩形，就根本看不到把。有点没能理解你的意思，你能画一个你要的效果的草图吗？

for(var i = 0; i < 10; i++){
new Map(game.canvas.width i, game.canvas.height 0.7);
}

......

// 午休有点时间，改了你的代码，不知道是不是你要的效果

var Map = window.Map = function(x,y,width, height){
  this.x = x;
  this.y = y;
  
  // 建议这些绘制需要的参数都在构造函数这里配置好
  this.width = width;
  this.height = height;
  //game.MapArr.push(this);// Map 不应该依赖 game
}
Map.prototype.render = function(ctx){
  ctx.save();
  ctx.fillStyle = "black";
  // ctx.fillRect(this.x,this.y,100,100);
  ctx.fillRect(this.x,this.y,this.width,this.height);
  ctx.restore();
}


// game
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
    
var game = {
  'canvas': canvas,
  'ctx': ctx,
  'mapArr': [] // 还有这里 只有类的命名才是大写字母开头 MapArr -> mapArr
};

var randomWidth; // 随机宽度
var gap = 20; // 间隔宽度
var startX = 0; // 每个矩形的起始 X
var canvasWidth = game.canvas.width;
var canvasHeight = game.canvas.height;

while(startX <= canvasWidth) {
  randomWidth = Math.random() * 100;
   game.mapArr.push(
    new Map(
      startX, 
      canvasHeight * 0.7,
      randomWidth,
      canvasHeight * 0.3 
    )
   );
   startX += gap + randomWidth;

}


for (var i = 0; i < game.mapArr.length; i++) {
   game.mapArr[i] && game.mapArr[i].render(game.ctx);
}

codepen 查看

希望可以帮到你 :)

这篇关于canvas中如何连续画多个高度和间距相同而宽度不同的矩形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！