javascript - 使用 JS 实现图像的长阴影

Question

我希望能够在 JS 中从图像中制作长阴影。我见过在线处理文本的方法，但没有见过处理图像(具有透明背景)的方法。我不知道如何在不制作图像的多个副本并按照我想要的方向翻译它们的情况下解决这个问题。

Answer 1

唯一的解决方案(我能看到)就是完全按照你所说的去做。

在 canvas 元素中创建图像的多个副本并对其进行操作。

这是一个示例(取自 this answer ):

function drawImageWithShadow(img) {
  var ctx = document.getElementById('mainCanvas').getContext('2d');
  var tmpCanvas = document.createElement('canvas');
  var tmpCtx = tmpCanvas.getContext('2d');

  // Put your image on a temporary canvas,
  // which will let you create a shadow depending on the shape 
  // of what isn't transparent within your image
  tmpCtx.drawImage(img, 0, 0);

  // Set the shadow properties on the (still empty) canvas.
  ctx.shadowOffsetX = 4;
  ctx.shadowOffsetY = 4;
  ctx.shadowColor = 'black';
  ctx.shadowBlur = 5;

  // Add your temporary canvas into the canvas, 
  //which will generate the shadow dynamically depending on the shape of your image.
  ctx.drawImage(tmpCanvas, 0, 0);
}

<img src="http://www.google.com/images/icons/product/chrome-48.png" onload="drawImageWithShadow(this)" />
<br>
<canvas id="mainCanvas"></canvas>