gpt4 book ai didi

javascript - 动态扩展 Canvas 而不拉伸(stretch)绘制的内容

转载 作者:行者123 更新时间:2023-11-30 10:06:33 26 4
gpt4 key购买 nike

我有一个 Canvas ,我在 Canvas 上添加正方形。现在,正如您将在我包含的示例中看到的那样,单击“展开 Canvas ”按钮确实展开了 Canvas ,但拉伸(stretch)了其中已有的内容,而不是适应新内容。我怎样才能让它显示新盒子,而旧盒子保持相同的外观?

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

代码如下:

HTML

<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)

最佳答案

这一行是错误的。

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

那是jQuery设置CSS宽度,需要设置canvas的width属性。请注意,这将删除 Canvas (但无论如何您都会重新绘制,因此在这种情况下这没什么大不了的)。

所以你的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 大小后重新绘制所有正方形,因为正如我之前提到的那样,更改 Canvas 尺寸会清除 Canvas 。

关于javascript - 动态扩展 Canvas 而不拉伸(stretch)绘制的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28815729/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com