Javascript 动态扩展画布，而不拉伸所绘制的内容_Javascript_Jquery_Html_Css_Canvas

Javascript 动态扩展画布，而不拉伸所绘制的内容

javascript jquery html css canvas

Javascript 动态扩展画布，而不拉伸所绘制的内容,javascript,jquery,html,css,canvas,Javascript,Jquery,Html,Css,Canvas,我有一个画布，在画布上添加正方形。现在，正如您将在我包含的示例中看到的，单击“展开画布”按钮确实会展开画布，但会拉伸画布中已经存在的内容，而不是适合新内容。如何使新的框显示出来，而旧的框保持相同的外观见下文：代码如下： HTML JS 这条线错了 $("#canvas").width(canvasWidth) 这就是jQuery设置CSS宽度的过程，您需要设置画布的宽度属性。请注意，这将擦除画布，但无论如何都要重新绘制，所以在这种情况下这不是什么大问题所以你的onclick函数应该是这样

我有一个画布，在画布上添加正方形。现在，正如您将在我包含的示例中看到的，单击“展开画布”按钮确实会展开画布，但会拉伸画布中已经存在的内容，而不是适合新内容。如何使新的框显示出来，而旧的框保持相同的外观

见下文：

代码如下：

HTML

这条线错了

$("#canvas").width(canvasWidth)

这就是jQuery设置CSS宽度的过程，您需要设置画布的宽度属性。请注意，这将擦除画布，但无论如何都要重新绘制，所以在这种情况下这不是什么大问题

所以你的onclick函数应该是这样的

$('button').on('click', function() {

  squareCount++;
  canvasSize = (squareCount*100);
  $('#canvas')[0].width = canvasSize;
  for (var i=0; i<squareCount; i++){
    addBoxText("hello",i)
    drawSquare(i)
  }

  drawborderRight(squareCount);
})

编辑：围绕事物的顺序进行更改，以产生所需的行为。关键的更改是在调整画布大小后重新绘制所有正方形，因为正如我前面提到的，更改画布尺寸会清除画布

这条线错了

$("#canvas").width(canvasWidth)

这就是jQuery设置CSS宽度的过程，您需要设置画布的宽度属性。请注意，这将擦除画布，但无论如何都要重新绘制，所以在这种情况下这不是什么大问题

所以你的onclick函数应该是这样的

$('button').on('click', function() {

  squareCount++;
  canvasSize = (squareCount*100);
  $('#canvas')[0].width = canvasSize;
  for (var i=0; i<squareCount; i++){
    addBoxText("hello",i)
    drawSquare(i)
  }

  drawborderRight(squareCount);
})

$“画布”。宽度使用CSS更改画布的宽度

这将拉伸现有内容以适应更大的宽度，因此这就是拉伸现有内容的原因

如果要使用CSS增加画布大小，则应按相同的百分比调整画布宽度和画布高度的大小，以避免失真：

var pct=((squareCount*100) + 100)/canvas.width;
$('#canvas').width(canvas.width*pct).height(canvas.height*pct);

使用CSS调整大小的一个副作用是，当内容被绘制得更大时，内容将变得像素化

要避免这种像素化，请执行以下操作：

记住您已经在javascript对象中绘制了哪些方块

var box1={x:35,y:35,w:30,h:30};

调整画布元素的大小，而不是使用CSS。调整画布元素的大小也将自动清除所有画布内容

canvas.width=(squareCount*100) + 100;

使用保存在JS对象中的信息重新绘制之前的所有方块

// redraw box1
ctx.fillRect(box1.x,box1.y,box1.w,box1.h);

为了提高效率，您可能会将所有以前的var框对象放在一个数组中，并重新绘制该数组中的所有框

var boxes=[];
boxes.push(box1);
for(var i=0;i<boxes.length;i++){
    var box=boxes[i];
    ctx.fillRect(box.x,box.y,box.w,box.h);
}

$'canvas.width使用CSS更改画布的宽度