如何制作画布填满整个表格的区域

我正在尝试创建一个匹配的游戏。我创建了一个包含要匹配元素的左右表格。中间表包含一个画布。如何制作画布填满整个表格的区域

但是，画布只会将自己置于桌子的中间，在其顶部和底部留下大量空间，从而无法匹配。

无论如何要让画布填满桌子的整个区域吗？

守则

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

如何制作画布填满整个表格的区域

回答

相关问题