Question

我一直试图在不使用画布的情况下创建棋盘图案。问题是，我需要一个100px乘100px的正方形，其中每个像素在绿色[rgb（0,255,0）]和黄色[rgb（255,255,0）]之间交替（如棋盘但在像素级别）。我可以用html进行大量的复制和粘贴...... [这里]（http://jsfiddle.net/DyEq9/3/）。

但是，我使用的调查软件不允许这么长的代码。该软件似乎也不支持canvas功能。任何帮助表示赞赏。

Answer 1

正如Christopher所提到的，你可以创建一个2x2图像版本的网格，并将其设置为背景图像，重复。到目前为止，这可能是最好的解决方案。

如果由于某种原因无法实现，并且您可以访问CSS3，则可以执行此操作：

http://jsfiddle.net/DyEq9/4/

width:100px;
height:100px;
background-size: 2px 2px;
background-position: 0 0, 1px 1px;
background-color:#ff0;
background-image: -webkit-linear-gradient(45deg, #0f0 25%, transparent 25%, transparent 75%, #0f0 75%, #0f0), -webkit-linear-gradient(45deg, #0f0 25%, transparent 25%, transparent 75%, #0f0 75%, #0f0);

Answer 2

您可以通过使用绿色/黄色背景创建200px x 100px的图像来伪造它，然后重复它。

.chessboard-container {
 background:url('chess-tile.gif') repeat;
}

在没有画布的html / javascript中制作棋盘？

2 个答案: