使用画布绘制渐变栅格解决栅格图像锯齿问题

最新推荐文章于 2023-03-20 20:35:36 发布

兴诚

最新推荐文章于 2023-03-20 20:35:36 发布

阅读量532

点赞数

分类专栏：水利专题 arcgis for js arcmap

本文链接：https://blog.csdn.net/weixin_42496466/article/details/118926193

版权

arcgis for js 同时被 3 个专栏收录

16 篇文章 2 订阅

订阅专栏

arcmap

10 篇文章 0 订阅

订阅专栏

水利专题

8 篇文章 4 订阅

订阅专栏

第一步：栅格转json

第二步：编写解析json算法在canvas绘制渐变

var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
var colors=["#FF0000","#F00F00","#E11E00", "#D22D00", "#C33C00", "#B44B00", "#A55A00", "#966900", "#877800", "#788700", "#699600", "#5AA500", "#3CC300", "#2DD200", "#1EE000","#0FE000"];

for(var i = 0; i < testdata[0].header.ny; i++){
    var g = ctx.createLinearGradient(0,testdata[0].header.ny-i*1-1,testdata[0].header.nx,testdata[0].header.ny-i*1-1);
    for(var j = 0; j < testdata[0].header.nx; j++){
        g.addColorStop((j+1)/281,colors[parseInt(testdata[0].data[(i*testdata[0].header.nx)+j]/6.5)]);
    }
    ctx.fillStyle = g;
    ctx.fillRect(0,testdata[0].header.ny-i*1-1,testdata[0].header.nx,1);
}

第三步：查看效果和原始对比

最后：贡献完成算法及样例数据代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="cas" width="281" height="482"></canvas>
<script type="text/javascript">
    var testdata="示例数据太多，有需要请扫描联系";
  var canvas = document.getElementById("cas");
  var ctx = canvas.getContext("2d");
  var colors=["#FF0000","#F00F00","#E11E00", "#D22D00", "#C33C00", "#B44B00", "#A55A00", "#966900", "#877800", "#788700", "#699600", "#5AA500", "#3CC300", "#2DD200", "#1EE000","#0FE000"];

  for(var i = 0; i < testdata[0].header.ny; i++){
      var g = ctx.createLinearGradient(0,testdata[0].header.ny-i*1-1,testdata[0].header.nx,testdata[0].header.ny-i*1-1);
      for(var j = 0; j < testdata[0].header.nx; j++){
          g.addColorStop((j+1)/281,colors[parseInt(testdata[0].data[(i*testdata[0].header.nx)+j]/6.5)]);
      }
      ctx.fillStyle = g;
      ctx.fillRect(0,testdata[0].header.ny-i*1-1,testdata[0].header.nx,1);
  }
</script>
</body>
</html>

感谢支持技术分享，请扫码点赞支持：

技术合作交流qq:2401315930

兴诚

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
使用画布绘制渐变栅格解决栅格图像锯齿问题

第一步：栅格转json第二步：编写解析json算法在canvas绘制渐变var canvas = document.getElementById("cas");var ctx = canvas.getContext("2d");var colors=["#FF0000","#F00F00","#E11E00", "#D22D00", "#C33C00", "#B44B00", "#A55A00", "#966900", "#877800", "#788700", "#699600",.
复制链接

扫一扫