Canvas用clip裁剪之后填充的图有白边能解决吗

在JavaScript的canvas中用clip()裁剪之后，填充的图形有白边怎么解决？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canv" width="640" height="480"></canvas>
		<script type="text/javascript">
			var canv=document.getElementById("canv");
			var hb=canv.getContext("2d");
			hb.translate(320,240);
			hb.fillStyle="#000000";
			function drawTriangle(triangle){
				hb.save();
				hb.beginPath();
				hb.moveTo(triangle[0][0],triangle[1][0]);
				hb.lineTo(triangle[0][1],triangle[1][1]);
				hb.lineTo(triangle[0][2],triangle[1][2]);
				hb.closePath();
				hb.clip();
				hb.fill();
				hb.restore();
			}
			function drawRect(x1,y1,x2,y2){
				var cx=(x1+x2)/2,cy=(y1+y2)/2;
				drawTriangle([
					[x1,cx,x1],
					[y1,cy,y2]
				]);
				drawTriangle([
					[x1,cx,x2],
					[y1,cy,y1]
				]);
				drawTriangle([
					[x2,cx,x2],
					[y1,cy,y2]
				]);
				drawTriangle([
					[x1,cx,x2],
					[y2,cy,y2]
				]);
			}
			drawRect(-100,-100,100,100);
		</script>
	</body>
</html>

比如有一个10*10像素的矩形，如图

需要按对角线裁剪成四个三角形分别绘出，如图

对角线所占据的像素点（红色部分），无论在哪边的三角形中都不是完整的，从而无法绘出，形成透明毛边

更改三角形的顶点坐标，将每个原来无法绘出的像素点完整地分配到某三角形中，如图

灰色、橙色、黄色、绿色这四个三角形分别完整地装下了所有像素点，且没有重复绘制的点

划分的像素点如图

灰色三角形原来的顶点（0,0）移到了（0，0-1），顶点（5,5）移到了（5+0.5,5-0.5），顶点（0,10）不变。

你要做一个什么样的效果呢？

问题有解决方案了吗？

一样的也是裁切了之后有白线。

老兄我昨天也遇到这个问题跟你的一模一样怎么解决啊

你电话是多少

求解决方案

经过我的测试，在题主所说的clip操作之后，可以在fill之后，使用额外的两次stroke，将斜边的部分也绘制满颜色