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

canvas fill - spaces between shapes (antialias)

本文关键字：空间 之间 布填充 填充      更新时间：2023-09-26

我有问题，但不知道如何解决。以下是示例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();

正如您所看到的，在两个三角形之间有一条由抗锯齿引起的黑线。我想在画布上做一些像这个随机图像一样的东西，但我一直在三角形之间寻找间隙。解决这个问题的唯一方法是使三角形变大以重叠它们，但它会变得不均匀/不规则。有什么想法吗？

  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>

  1. 或对每个三角形重复喷漆操作3次-http://jsfiddle.net/ctt4f6ox/1/
相关文章：