调整 HTML5 画布大小答案

【问题标题】：resize HTML5 canvas调整 HTML5 画布大小
【发布时间】：2013-10-06 14:53:35
【问题描述】：

我正在使用 html canvas 元素将一些数据绘制为图表。

我在一页上有 4 个画布，每个画布都有一个图表。

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

对于较小的图表，我的代码如下： <canvas width='350' height='200' ></canvas>

对于较大的图表，我使用以下属性重建相同的图表： <canvas width='700' height='350' ></canvas>

我试过了：

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

我得到了非常意想不到的结果，例如空白图表或更大的画布，但比例相差甚远。

【问题讨论】：

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

标签： html css html5-canvas

【解决方案1】：

保存起始画布尺寸：

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

放大：

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

减少回到起始尺寸：

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

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

【讨论】：

【解决方案2】：

这是你想要的吗？我做了一个jsfiddle在这里检查http://jsfiddle.net/NDgMC/ ，我只是在css中使用了:checked伪元素和一个复选框

HTML 代码：

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

CSS 代码：

input.toggle{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 100;
    border: none;
    cursor: pointer;
}

input.toggle:checked + #myCanvas{
    border:1px solid #000000;
    background-color:#000;
    width:400px;
    height:200px;
    -webkit-transition:0.5s;
    transition:0.5s;
}

#myCanvas{
    border:1px solid #000000;
    background-color:#ccc;
    width:200px;
    height:100px;
    -webkit-transition:0.5s;
    transition:0.5s;
}

【讨论】：