javascript - 减少两个 Canvas html 之间的空间

Question

我正在尝试在附近放置两个 Canvas 。但不幸的是，当我包含两个 Canvas 时，它会自动在两个 Canvas 之间产生一个空间。如何删除那个空白区域或如何连接那两个 Canvas 。这是我的 fiddle 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 之间的空白:

<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>