畫布高度適合內容
[英]Canvas height to fit content
問題描述
我問了一個類似的問題，雖然假裝沒有回答我的問題，但它被標記為一個騙局。
編輯：騙局是[stackoverflow.com/questions/17211920/make-canvas-height-auto] [1]
我正在使用畫布來打印熱敏收據，您可能會想到收據的高度可能會有所不同，具體取決於收據上的物品數量。
因此我需要畫布來調整內容。
我知道canvas.height = window.innerHeight和類似但我不知道這對我有什么幫助。
HTML
<body onload='onDrawReceipt(shipment, returns, company, customer, img)'>
<form onsubmit='return false;'>
<table id= "thermal-receipt-table" style='width:100%;'>
<tbody>
<tr >
<td colspan='2' class='left'>
<div id='canvasFrame'>
<canvas id='canvasPaper' width='576' height= '640' >
</canvas>
</div>
</td>
</tr>
</tbody>
</table>
</form>
JS
function onDrawReceipt(order, returns, company, customer, img) {
var canvas = document.getElementById('canvasPaper');
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.textBaseline = 'top';
lineSpace = 20;
leftPosition = 0;
//centerPosition = canvas.width / 2;
centerPosition = (canvas.width + 26) / 2;
//rightPosition = canvas.width;
rightPosition = (canvas.width - 0);
// cursor = 0;
cursor = 80;
//rest of code taking content to more than 640px in height.
}
1 個解決方案
解決方案1
0 2018-06-13 14:47:38
您可以依賴contentContainerNode.offsetHeight
var canvas = document.getElementById('canvasPaper')
var contentContainerNode = document.getElementById('myContentContainer')
canvas.height = contentContainerNode.offsetHeight
Raphaeljs調整畫布大小以適合內容
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.