Question

我有问题，但不知道如何解决它。以下是示例http://jsfiddle.net/ctt4f6ox/。

HTML

<canvas id="tester"></canvas>

CSS

#tester{
    width: 160px;
    height: 160px;
    background: #000;
}

JS

var c = $('#tester');
var cdom = c[0];
var ctx = cdom.getContext('2d');
cdom.width = cdom.height = ctx.width = ctx.height = 160;

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(60,80);
ctx.fillStyle="white";
ctx.fill();
ctx.lineTo(140,80);
ctx.lineTo(100,20);
ctx.fillStyle="white";
ctx.fill();

如您所见，由抗锯齿引起的两个三角形之间存在黑线。我想在画布上制作像this随机图像，但我不断在三角形之间找到间隙。解决这个问题的唯一方法是使三角形更大以重叠它们，但它会变得不均匀/不规则。有什么想法吗？

Answer 1

不要用黑色填充背景，保持透明，并用三角形填充每个空间。

var c = $('#tester');
var cdom = c[0];
var ctx = cdom.getContext('2d');
cdom.width = cdom.height = ctx.width = ctx.height = 160;

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(60,80);
ctx.fillStyle="green";
ctx.fill();

ctx.beginPath();
ctx.moveTo(60,80);
ctx.lineTo(140,80);
ctx.lineTo(100,20);
ctx.fillStyle="red";
ctx.fill();

#tester{
	width: 160px;
	height: 160px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="tester"></canvas>

或者为每个三角形重复绘画操作3次 - http://jsfiddle.net/ctt4f6ox/1/

画布填充 - 形状之间的空格（抗锯齿）

1 个答案: