开发者小峰 2021-06-23 14:56 采纳率: 100%
浏览 244
已采纳

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>
  • 写回答

7条回答 默认 最新

  • 开发者小峰 2021-06-28 20:56
    关注

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

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

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

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

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

    划分的像素点如图

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题?

悬赏问题

  • ¥15 java根据模板,生成word文档,需要带目录
  • ¥15 广告联盟的兜底广告是什么意思
  • ¥15 如何证明高斯噪声的包络公式
  • ¥150 寻找王者荣耀开发作者,合作或者解答
  • ¥15 乳腺癌数据集 相关矩阵 特征选择
  • ¥15 我的游戏账号被盗取,请问我该怎么做
  • ¥15 通关usb3.0.push文件,导致usb频繁断连
  • ¥15 有没有能解决微信公众号,只能实时拍照,没有选择相册上传功能,我不懂任何技术,,有没有给我发个软件就能搞定的方法
  • ¥15 Pythontxt文本可视化
  • ¥15 如何基于Ryu环境下使用scapy包进行数据包构造