调整大小HTML5画布

我正在使用html canvas元素以图表形式绘制一些数据。调整大小HTML5画布

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

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

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

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

我曾尝试：

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

我得到了非常意想不到的结果，例如空白图表或更大的画布，但比例还是有限的。

来源

2013-09-30 Diane2

有些代码可以帮助您查看您正在尝试的内容。要放大，您可以使用缩放方法。查看[转换]（https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations） – jing3142

画布是一个像素矩阵。如果将画布的大小增加50％，会发生什么？没有这样的东西像1.5px宽的线，那么浏览器应该做什么？这就是为什么没有发生。这是应该处理这种情况的程序员。因此，要么调整画布上绘制的内容（缩放和重绘），要么作为穷人的解决方案，请使用css3缩放：http://stackoverflow.com/questions/13393588/complete-styles-for-cross-browser-css -zoom –

@SergiuParaschiv，请查看我的编辑 – Diane2

保存出发画布尺寸：

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

然后被点击画布时，切换较大和起始大小之间的尺寸。

来源

2013-09-30 19:15:52 markE

这是你想要的吗？我犯了一个的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; 
}

来源

2013-09-30 17:56:23

调整大小HTML5画布

回答

相关问题