HTML Canvas绘制圆柱图像边缘锯齿、调步长后变形如何解决？

问题根源 #

你调整步长后出现的变形问题，核心是drawImage接口的源切片宽度参数没有和目标切片宽度同步适配。drawImage的参数对应逻辑如下：

ctx.drawImage(图像, 源区域X坐标, 源区域Y坐标, 源区域宽度, 源区域高度, 目标区域X坐标, 目标区域Y坐标, 目标区域宽度, 目标区域高度)

当你把目标切片宽度从1px缩小到0.1px时，对应的源图像切片宽度也需要按相同比例缩小，否则就会出现大尺寸源内容被压缩到极小目标区域的变形问题。同时你原有代码的循环边界设置有误，也会加剧图像拉伸问题。

修复代码 #

loadUpperIMage(ctx: any, rotate: number, scale: number) {
    var img = new Image();
    img.src = this.designImgUrl;
    img.onload = function() {
      // 开启高画质平滑，进一步优化抗锯齿效果
      ctx.imageSmoothingEnabled = true;
      ctx.imageSmoothingQuality = 'high';
      
      var iw = img.width;
      var ih = img.height;

      var xOffset = 100, //左侧内边距
        yOffset = 110; //顶部内边距

      var a = 75.0; //图像宽度
      var b = 12.0; //圆弧度

      var scaleFactor = iw / (scale * a);
      // 统一定义切片步长，同步关联源、目标切片宽度
      const sliceStep = 0.1;
      const sourceSliceWidth = sliceStep * scaleFactor;
      const targetSliceWidth = sliceStep;

      // 修正循环边界：按目标区域宽度a遍历，而非原图宽度iw
      for (var X = 0; X < a; X += sliceStep) {
        var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); //椭圆方程          
        ctx.drawImage(img, (X * scaleFactor), 0, sourceSliceWidth, ih, X + xOffset, y + yOffset, targetSliceWidth, 174);
      }
    };
  }

额外优化建议 #

• 如果需要兼容旧版浏览器，可以补充前缀平滑配置：

  ctx.webkitImageSmoothingEnabled = true;
  ctx.mozImageSmoothingEnabled = true;
  ctx.msImageSmoothingEnabled = true;
  

• 如果对性能要求较高，可将步长调整为0.2~0.5，配合平滑配置也能获得不错的效果，减少绘制计算量

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