調整大小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畫布

回答

相關問題