如何製作畫布填滿整個表格的區域

我正在嘗試創建一個匹配的遊戲。我創建了一個包含要匹配元素的左右表格。中間表包含一個畫布。如何製作畫布填滿整個表格的區域

但是，畫布只會將自己置於桌子的中間，在其頂部和底部留下大量空間，從而無法匹配。

無論如何要讓畫布填滿桌子的整個區域嗎？

守則

table { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
table ul { 
 
    list-style-type: none; 
 
    margin-left: 50px; 
 
    padding: 0; 
 
    padding-left: 5px; 
 
    width: 200px; 
 
}

<table class="first"> 
 
    <tr> 
 
    <td> 
 
     <ul class="firstleft"></ul> 
 
    </td> 
 
    <td> 
 
     <canvas id="myCanvas" resize></canvas> 
 
    </td> 
 
    <td> 
 
     <ul class="firstright"></ul> 
 
    </td> 
 
    </tr> 
 
</table>

https://jsfiddle.net/ngkghxja/

來源

2016-02-11 CHEWWWWWWWWWW

請提供您的代碼片段或的jsfiddle（包括css） – JayIsTooCommon

我沒有添加HTML或CSS在第一個COS它沒有太大的用處。現在你可以判斷自己是否有幫助 – CHEWWWWWWWWWW

注意畫布帶有兩個大小是很重要的 - 繪圖表面的大小和的大小畫布元素本身。您想要通過更改畫布width和height屬性將繪圖表面的大小設置爲父元素td的尺寸。

使用jQuery，你可以這樣做：

var canvas = document.getElementById("myCanvas"); 
var $td = $('canvas').parent(); 
canvas.width = $td.width(); 
canvas.height = $td.height();

沒有jQuery的，你必須使用parentNode的clientWidth和clientHeight，而不是：

var td = canvas.parentNode; 
canvas.width = td.clientWidth; 
canvas.height = td.clientHeight;

來源

2016-02-11 14:12:48 Stiliyan

你需要在純JavaScript中指定canvas元素的變量： var canvas = getElementById（'myCanvas'） –

是的，在這兩種情況下都是必需的 – Stiliyan

如何製作畫布填滿整個表格的區域

回答

相關問題