html - 调整 HTML5 画布大小

Question

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

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

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

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

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

我试过了：

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

2. onclick - 使用 CSS 样式高度和宽度中的新值重绘整个图表。

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

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

Answer 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

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

Answer 2

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

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;
}