调整HTML5画布的大小

我使用html画布元素将一些数据绘制为图表

我在一页上画了4张画布，每张画布上都有一张图表

当用户点击图表时，我想放大图表

对于较小的图表，我的代码如下：

对于较大的图表，我使用以下属性重建相同的图表：

我试过：

onclick-使用高度和宽度属性中的新值重新绘制整个图表

onclick-使用css样式高度和宽度中的新值重新绘制整个图表

onclick-使用属性和css样式中的新值重新绘制整个图表

---

我得到了意想不到的结果，比如一张空白的图表，或者更大的画布，但是比例太大了。

这就是你想要的吗？我在这里检查了一下 ，我刚刚使用了：checked css中的伪元素和一个复选框

HTML代码：

<input type="checkbox" class="toggle" name="ao-toggle" />
<canvas id="myCanvas"></canvas>

---

这是你想要的吗？我在这里检查了一下 ，我刚刚使用了：checked css中的伪元素和一个复选框

HTML代码：

<input type="checkbox" class="toggle" name="ao-toggle" />
<canvas id="myCanvas"></canvas>

---

保存起始画布维度：

var canvasWidth=canvas.width;
var canvasHeight=canvas.height;

canvas.width=canvasWidth;
canvas.height=canvasHeight;
context.scale(1,1);
// And now redraw your chart normally
// It will be back to the starting dimensions

放大：

canvas.width=canvasWidth*1.5;
canvas.height=canvasHeight*1.5;
context.scale(1.5,1.5);
// And now redraw your chart normally
// It will be 50% larger

要缩小回起始尺寸，请执行以下操作：

var canvasWidth=canvas.width;
var canvasHeight=canvas.height;

canvas.width=canvasWidth;
canvas.height=canvasHeight;
context.scale(1,1);
// And now redraw your chart normally
// It will be back to the starting dimensions

---

然后单击画布时，在较大尺寸和起始尺寸之间切换尺寸。

保存起始画布尺寸：

var canvasWidth=canvas.width;
var canvasHeight=canvas.height;

canvas.width=canvasWidth;
canvas.height=canvasHeight;
context.scale(1,1);
// And now redraw your chart normally
// It will be back to the starting dimensions

放大：

canvas.width=canvasWidth*1.5;
canvas.height=canvasHeight*1.5;
context.scale(1.5,1.5);
// And now redraw your chart normally
// It will be 50% larger

要缩小回起始尺寸，请执行以下操作：

var canvasWidth=canvas.width;
var canvasHeight=canvas.height;

canvas.width=canvasWidth;
canvas.height=canvasHeight;
context.scale(1,1);
// And now redraw your chart normally
// It will be back to the starting dimensions

---

然后单击画布时，在较大尺寸和起始尺寸之间切换尺寸。

一些代码将有助于查看您正在尝试的内容。要放大，可以使用“缩放”方法。检查画布是一个像素矩阵。如果将画布的大小增加50%，会发生什么情况？没有1.5px宽的线条，那么浏览器应该做什么呢？这就是为什么什么都没发生。应该由程序员来处理这种情况。因此，要么调整画布上绘制的内容并重新绘制，要么，作为穷人的解决方案，使用css3 zoom:@SergiuParaschiv，请查看我的editsSome代码，这将有助于查看您正在尝试的内容。要放大，可以使用“缩放”方法。检查画布是一个像素矩阵。如果将画布的大小增加50%，会发生什么情况？没有1.5px宽的线条，那么浏览器应该做什么呢？这就是为什么什么都没发生。应该由程序员来处理这种情况。因此，要么调整画布比例并重新绘制，要么，作为穷人的解决方案，使用css3 zoom:@SergiuParaschiv，请查看我的编辑