Canvas绘制路径异常求助：指定路径显示为黑色矩形

首先，咱们先搞定你遇到的“只显示黑色矩形”的问题：这大概率是因为你没正确设置Canvas的实际绘图尺寸，仅用CSS设置了它的显示尺寸。Canvas有两个关键尺寸概念：

• 标签上的width和height属性：这是绘图的实际像素画布大小
• CSS的宽高：只是它在页面上的显示尺寸

如果只设置CSS宽高，Canvas会默认用300x150的绘图尺寸拉伸到你设置的显示尺寸，直接导致你的路径被扭曲成矩形。所以第一步要给Canvas标签加上正确的宽高属性：

<canvas id="myCanvas" width="600" height="600"></canvas>

接下来处理在(440,400)处添加圆角的需求，推荐用ctx.arcTo()方法绘制转角圆角，这个方法能根据转角的相邻线段自动生成圆弧，用法很适合你的场景。

修改后的完整代码示例：

const ctx = document.getElementById('myCanvas').getContext('2d');

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 0);

// 在(440,400)处添加圆角，半径设为20，可按需调整
const cornerX = 440;
const cornerY = 400;
const radius = 20;
// arcTo参数：转角前线段的终点延伸点、转角后线段的起点延伸点、圆角半径
ctx.arcTo(500, cornerY, cornerX, 500, radius);

ctx.lineTo(0, 500);
ctx.lineTo(0, 0);
ctx.fillStyle = '#000'; // 可自定义填充颜色，默认黑色
ctx.fill();

要是你觉得arcTo的逻辑有点绕，也可以用arc方法手动绘制圆弧，不过arcTo更适配这种转角圆角的场景。另外调试时可以先用stroke()画出路径轮廓，确认形状正确后再用fill()填充，这样更容易排查问题。

内容的提问来源于stack exchange，提问作者Aaroniker