Canvas描边与填充透明度不一致：如何让描边透明度匹配填充？

这个问题其实是Canvas坐标系统的像素对齐导致的视觉错觉，不是描边的透明度真的低于填充哦！

问题根源 #

Canvas的坐标系统是以像素中心为原点的，当你用默认的lineWidth: 1在整数坐标（比如20,20）绘制描边时，这条1px宽的线条会横跨两个相邻像素的边界。浏览器为了让线条看起来更平滑，会对边缘进行抗锯齿处理，这就导致描边的颜色被“稀释”，视觉上显得比同透明度的填充更淡。而填充操作是直接覆盖整个像素区域，不会有这种抗锯齿的影响，所以看起来颜色更实。

解决方案：对齐像素边界 #

只需要把描边矩形的坐标加上0.5，让线条刚好落在单个像素的中心，就能避免抗锯齿，让描边和填充的视觉透明度完全一致：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "rgba(255,0,0,1)";
ctx.fillStyle = "rgba(255,0,0,1)";
// 给坐标加上0.5，对齐像素边界
ctx.strokeRect(20.5, 20.5, 25, 25);
ctx.fillRect(20, 50, 25, 25);

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas>

额外说明 #

• 如果你的lineWidth是偶数（比如2px），整数坐标就可以正常对齐，不需要加0.5；只有奇数宽度的描边需要调整坐标来避免抗锯齿。
• 如果你需要保持整数坐标，也可以通过设置ctx.imageSmoothingEnabled = false来关闭抗锯齿，但这种方式可能会让线条边缘显得生硬，不如坐标调整的效果自然。

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