相邻的两个开启抗锯齿绘制的三角形中间会有一条抗锯齿线 版本 release/2.1 #1068
Description
c++ 的代码如下
tgfx::Path background_path;
tgfx::Path triangle_lt;
tgfx::Path triangle_rb;
background_path.moveTo(200, 200);
background_path.lineTo(400, 200);
background_path.lineTo(400, 400);
background_path.lineTo(200, 400);
background_path.lineTo(200, 200);
background_path.close();
triangle_lt.moveTo(200, 200);
triangle_lt.lineTo(400, 200);
triangle_lt.lineTo(200, 400);
triangle_lt.lineTo(200, 200);
triangle_lt.close();
triangle_rb.moveTo(200, 400);
triangle_rb.lineTo(400, 200);
triangle_rb.lineTo(400, 400);
triangle_rb.lineTo(200, 400);
triangle_rb.close();
tgfx::Paint paint;
paint.setColor(tgfx::Color::FromRGBA(255,0,0,255));
tgfx_canvas->drawPath(background_path, paint);
paint.setColor(tgfx::Color::FromRGBA(0, 255, 0, 255));
tgfx_canvas->drawPath(triangle_lt, paint);
paint.setColor(tgfx::Color::FromRGBA(0, 255, 0, 255));
tgfx_canvas->drawPath(triangle_rb, paint);
效果如图
在 html 相同的逻辑的绘制样式如下
html 代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 两个三角形组成正方形</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
background-color: #f5f5f5;
}
canvas {
border: 2px solid #333;
background-color: white;
}
.desc {
margin-top: 20px;
font-size: 16px;
color: #666;
}
</style>
</head>
<body>
<canvas id="squareCanvas" width="300" height="300"></canvas>
<div class="desc">两个三角形（蓝色 + 橙色）组成正方形</div>
<script>
// 获取 Canvas 元素和上下文
const canvas = document.getElementById('squareCanvas');
const ctx = canvas.getContext('2d');
// 定义正方形的参数（以画布中心绘制边长为 200 的正方形）
const squareSize = 200; // 正方形边长
const startX = (canvas.width - squareSize) / 2; // 正方形左上角X坐标
const startY = (canvas.height - squareSize) / 2; // 正方形左上角Y坐标
ctx.beginPath();
ctx.moveTo(startX, startY); // 左上角
ctx.lineTo(startX + squareSize, startY); // 右上角
ctx.lineTo(startX + squareSize, startY + squareSize); // 左下角
ctx.lineTo(startX, startY + squareSize); // 左下角
ctx.closePath(); // 闭合路径
ctx.fillStyle = 'rgba(255, 0, 0, 1.0)'; // 蓝色（带透明度）
ctx.fill(); // 填充三角形
// 绘制第一个三角形（左下到右上对角线，蓝色）
ctx.beginPath();
ctx.moveTo(startX, startY); // 左上角
ctx.lineTo(startX + squareSize, startY); // 右上角
ctx.lineTo(startX, startY + squareSize); // 左下角
ctx.closePath(); // 闭合路径
ctx.fillStyle = 'rgba(0, 255, 0, 1)'; // 蓝色（带透明度）
ctx.fill(); // 填充三角形
// 绘制第二个三角形（右上到左下对角线，橙色）
ctx.beginPath();
ctx.moveTo(startX + squareSize, startY); // 右上角
ctx.lineTo(startX + squareSize, startY + squareSize); // 右下角
ctx.lineTo(startX, startY + squareSize); // 左下角
ctx.closePath(); // 闭合路径
ctx.fillStyle = 'rgba(0, 255, 0, 1)'; // 橙色（带透明度）
ctx.fill(); // 填充三角形
</script>
</body>
</html>
Metadata
Metadata
Assignees
Labels
No labels