Question

我正在尝试在附近放置两个画布。但不幸的是，当我包含两个画布时，它会自动在两个画布之间产生一个空格。如何删除该空白空间或如何连接这两个画布。这是我的小提琴Fiddle

这是我的代码：

<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas> 
<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas>

这是脚本：

window.onload=function()
{
var canvas = document.getElementById("button");
var ctx = canvas.getContext('2d');
}

Answer 1

HTML中的换行符被视为空格。简单地摆脱两幅画布之间的空白：

<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;">
</canvas><canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;">
</canvas>

请参阅fiddle.

或使用：

<canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas><!--
--><canvas id="button" width="30" height="30" style="border:1px solid #d3d3d3;background-color:green;"></canvas>

减少两个canvas html之间的空间

1 个答案: