Question

我希望能够通过图像在JS中制作长长的阴影。我已经看过如何处理文本在线但没有图像（具有透明背景）。我不知道如何处理这个问题而不制作图像的多个副本并按照我想要的方向进行翻译。

Answer 1

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

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

以下是一个示例（取自this answer）：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

使用JS的图像的长阴影

1 个答案: