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

Question

我有一个画布，我可以在画布上添加正方形。现在，正如您将在我包含的示例中看到的那样，单击“扩展画布”按钮确实会扩展画布，但会拉伸其中已有的内容，而不是适应新内容。我怎样才能使新框显示出来，而旧框保持相同的外观？

请参阅以下内容：http://jsfiddle.net/3q8tj17c/1/

代码如下：

超文本标记语言

<canvas id="canvas" width=100 height=100></canvas>
<button>expand canvas</button>

CSS

#canvas{
    border:2px dashed #00242D;
    border-right:none; 
}

JS

var canvas;
var ctx;
createBox()

function createBox(){
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
}

var squareCount = 0;
function drawSquare(squareNumber){
    squareNumber = (squareNumber*100) + 35
    ctx.beginPath();
    ctx.lineWidth="6";
    ctx.setLineDash([0]);
    ctx.fillStyle="#006C85";
    ctx.strokeStyle="#008BAB";
    ctx.fillRect(squareNumber,35,30,30);
    ctx.rect(squareNumber,35,30,30); 
    ctx.stroke();
    squareCount++;
}

function drawborderRight(squareNumber){
    squareNumber = (squareNumber * 100) - 1
    ctx.beginPath();
    ctx.setLineDash([8]);
    ctx.lineWidth="1";
    ctx.strokeStyle="#00242D";
    ctx.moveTo(squareNumber,0);
    ctx.lineTo(squareNumber, 100);
    ctx.stroke();    
}

function addBoxText(text, squareNumber){
    squareNumber = (squareNumber*100) + 50;
    ctx.textAlign="center";
    ctx.font = "16px Segoe UI Light";
    ctx.fillStyle = "#333"
    ctx.fillText(text,squareNumber,90)   
}

$('button').on('click', function() {
    canvasSize = (squareCount*100) + 100
    addBoxText("hello",squareCount)
    drawSquare(squareCount)
    drawborderRight(squareCount)
    $('#canvas').width(canvasSize).height(100);
})

addBoxText("blah",squareCount)
drawSquare(squareCount)
drawborderRight(squareCount)

Answer 1

这条线是错误的。

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

那是jQuery设置CSS宽度，你需要设置canvas的width属性。请注意，这将擦除画布（但无论如何您都会重新绘制，因此在这种情况下这不是什么大问题）。

所以你的 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);
})

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