img变量将保存于我们应用效果原始图像元素的引用。我们需要监听图像的onload 事件，以确保在应用效果时图像被完全加载。此外，将注意到，在onload 之后  还有一个img.src = img.src;。这将触发  onload功能，因为我们不确定浏览器加载图像和脚本的顺序。

在onload 处理程序内部  ，我们创建内存  canvas元素，我们将在其中绘制最终结果，与图像的大小相同spacing。然后，从最远点向中心开始，我们使用绘制的图像的偏移的极坐标变换绘制画布上的图像副本：

var x = Math.round(r * Math.cos(settings.shadowAngle * Math.PI / 180));
var y = Math.round(r * Math.sin(settings.shadowAngle * Math.PI / 180));

要在画布上绘制图像，我们使用画布2D上下文并调用  drawImage()函数。这将在画布上绘制图像的副本，但是我们需要的是它的彩色版本。为此，我们利用画布合成操作。在这个教程中，将 source-in与用shadowColor填充的矩形一起使用，这将使图像副本与原始图像具有相同形状但颜色是 shadowColor。 

请注意，如果你有多种颜色的图像，则结果将全部为相同的颜色，因为我们正在绘制阴影，而阴影通常是相同的颜色。

for循环负责绘制阴影; 然而，它是完全不透明的。我们希望能够使用shadowOpacity参数设置阴影不透明度  。为此，我们使用 copyCanvas()函数，该函数利用临时画布并将canvas内容的不透明度设置为指定的值。

我们必须在整个阴影被绘制出来时进行这一步，否则堆叠透明图像在彼此之上将导致渐变效果。

让我们来看看onload处理程序的最后两行  ：

self.onload = null;
$(self).attr("src", canvas.toDataURL("image/png"));

第一行onload从图像中移除 处理程序。我们这样做是因为在下一行中，我们想将在画布上绘制的图像设置src为原始图像的新  图像。如果我们没有删除处理程序，那么我们将进入一个无限循环。

如何使用jQuery长阴影插件？

现在我们已经实现了这个插件，我们来看看我们如何实际使用它以及它产生的结果。为此，我们将使用该  script.js文件，我们将在其中调用刚创建的插件。

调用插件的最简单的方法是：

$(document).ready(function(){
    $("#logo").longshadows();
});

这将指示浏览器当页面完成加载时，调用longshadows()函数.

调用这样的插件将使用默认参数。由于使用这些默认参数的结果并不是很好，我们来看看我们如何改变它们。让我们像这样调用插件：

$(document).ready(function(){
    $("#logo").longshadows({
        spacing:50,
        shadowOpacity:30,
        shadowAngle:30,
        shadowLength:400
    });
});

这导致像这样的图像：

从我们的插件得到的图像