Javascript 添加HTML5画布b&；对多个图像的w效果

我想创建一个画廊使用HTML5画布黑色的悬停效果，但我有一点麻烦

我可以在一个元素上获得完美的效果，但我似乎无法在多个元素上获得效果

以下是我所拥有的：

(function() {  
      var supportsCanvas = !!document.createElement('canvas').getContext;  
      supportsCanvas && (window.onload = greyImages);  

      function greyImages() {  
          var ctx = document.getElementsByTagName("canvas")[0].getContext('2d'),  
              img = document.getElementById("cvs-src"),  
              imageData, px, length, i = 0,  
              grey;  

          ctx.drawImage(img, 0, 0);  

          // Set 500,500 to the width and height of your image.  
          imageData = ctx.getImageData(0, 0, 378, 225);  
          px = imageData.data;  
          length = px.length;  

          for ( ; i < length; i+= 4 ) {  
              grey = px[i] * .1 + px[i+1] * .1 + px[i+2] * .1;  
              px[i] = px[i+1] = px[i+2] = grey;     
           }

          ctx.putImageData(imageData, 0, 0);  
      }  
  })();

---

看起来您仅将其应用于一个画布：

var ctx = document.getElementsByTagName("canvas")[0].getContext('2d')

您正在获取第一个画布（

[0]

）并获取其上下文。也许这样更好：

var canvases = document.getElementsByTagName("canvas");
for (var j = 0; j < canvases.length; j ++) {
  var ctx = canvases[j].getContext('2d'),  
      img = document.getElementById("cvs-src"),  
      imageData, px, length, i = 0,  
      grey;  
  // and so on...
}

var canvases=document.getElementsByTagName（“canvas”）；
对于（var j=0；j

我在上面找到了一个脚本，可以将画布应用于多个图像，这很好，但并不完全符合我的需要。我真的需要两者之间的某种混合。我如何使用WDW用于获取图像src的相同技术，并将画布应用于该技术，但使用上面的脚本？

var ctx = document.getElementsByTagName("canvas")[0].getContext('2d')

var canvases = document.getElementsByTagName("canvas");
for (var j = 0; j < canvases.length; j ++) {
  var ctx = canvases[j].getContext('2d'),  
      img = document.getElementById("cvs-src"),  
      imageData, px, length, i = 0,  
      grey;  
  // and so on...
}