首页 > 其他分享> 文章详细

利用echarts实现心形图片排列效果

2021-09-10 09:04:28 阅读：240 来源： 互联网

标签：排列心形 image ctx width photo var echarts 图片

内容简介

前几天看到一篇文章，利用echarts来实现气泡龙的效果，觉得可以从这个例子衍生出使用不同背景图来实现不同排版的效果；本文介绍利用该思路实现心形图片的排列效果。

实现过程

实现思路分析：

1、绘制本地图片到画布（ctx.drawImage）；

2、获取图片的像素点（imageData）；

3、根据图片的宽高和设置的间隔进行循环，当为黑色时（r + g + b == 0），就替换为设置的小图片，并把图片加到页面上。

Tips：因为第三点，所以图片要使用纯黑，不然效果会有差异；如果没有纯黑图片，也可以先使用echarts把本地图片转化为纯黑。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  <title>canvas</title>
  <link rel="shortcut icon" href="#" />
  <style>
  body {
    background-color: #333;
  }
  .photo {
    position: absolute;
  }
</style>
</head>
<body>
  <div id='container'></div>
  <canvas id='canvas' style="display: none;"></canvas>
  <script>
  window.onload = function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var image = new Image();
    image.src = "./images/heart.jpg";
    image.onload = function() {
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.drawImage(image, 0, 0);

      fillPhoto(ctx, image);
    }
  }


  // 心形填充为小图片
  function fillPhoto(ctx, image) {
    var imageData = ctx.getImageData(0, 0, image.width, image.height).data;
    ctx.clearRect(0, 0, image.width, image.height);

    var n = 1;
    var gap = 50; // 间隔
    var heartContainer = document.getElementById("container");
    var heartScale = 2; // 放大倍数
    for (var h = 0; h < image.height; h += gap) {
      for (var w = 0; w < image.width; w += gap) {
        var position = (image.width * h + w) * 4;
        var r = imageData[position],
          g = imageData[position + 1],
          b = imageData[position + 2];

        if (r + g + b == 0) { // 判断是否黑色
          var photo = document.createElement("img");
          photo.src = `./images/cba/${n}.jpg`;
          photo.setAttribute("class", "photo");

          var photoSize = Math.random() * 10 + 80;
          photo.style.left = (w * heartScale - photoSize / 2) + "px";
          photo.style.top = (h * heartScale - photoSize / 2) + "px";
          photo.style.width = photo.style.height = photoSize + "px";
          photo.style.animationDuration = Math.random() * 6 + 4 + "s";

          heartContainer.appendChild(photo);
          // 由于图片不够多，使用循环
          n++;
          n = n > 6 ? 1 : n;
        }
      }
    }
  }
</script>
</body>
</html>

标签：排列,心形,image,ctx,width,photo,var,echarts,图片
来源： https://blog.csdn.net/king0964/article/details/120214160

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

利用echarts实现心形图片排列效果

内容简介

实现过程