用JavaScript在HTML canvas元素上绘制透明图像

<!DOCTYPE html> 
    <html> 
    <head> 

    <title>Garage Door Application</title> 

    <style> 
      body { 
      margin: 0px; 
      padding: 0px; 
      } 
      #myCanvas 
      { 
      //background-color: blue; 
      } 
      .garagedoorthumbnail:hover 
      { 
      border: 1px solid green; 
      } 
    </style> 

    </head> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

    <body> 
    <canvas id="myCanvas" width="1000" height="604"></canvas> 

    </br> 

    <label>Trim Colors</label> 
    <select id="trimcolors" name="trimcolors"> 
     <option>Red</option> 
     <option>Green</option> 
     <option>Blue</option> 
     <option>Yellow</option> 
     <option>Purple</option> 
    </select> 

    <label>House Colors</label> 
    <select id="housecolors" name="housecolors"> 
     <option>Red</option> 
     <option>Green</option> 
     <option>Blue</option> 
     <option>Yellow</option> 
     <option>Purple</option> 
    </select> 

    <div id="doorgallary"> 
     <img class="garagedoorthumbnail" src="garagedoor-beadedpanel.png" /> 
     <img class="garagedoorthumbnail" src="garagedoor-beadedpanelclassic.png" /> 
     <img class="garagedoorthumbnail" src="garagedoor-beadedpaneltrifold.png" /> 
     <img class="garagedoorthumbnail" src="garagedoor-beadedpaneltrifoldstockton.png" /> 
     <p id="drawwhitebackground">White Background<p> 
    </div> 

    <script type="text/javascript"> 

    $(document).ready(function() { 

     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var imageObj = new Image(); 
     //context.globalCompositeOperation = "lighter"; 
     context.globalAlpha = 1; 

     imageObj.onload = function() { 
      context.drawImage(imageObj, 0, 0); 
     }; 
     imageObj.src = 'garageblank.png'; 

     $(".garagedoorthumbnail").click(function() { 
      console.log($(this).attr("src")); 
      var image = new Image(); 

      image.onload = function() { 
      context.drawImage(image, 135, 230, 320, 270); 
      }; 
      image.src = $(this).attr("src"); 
     }); 

     $("#drawwhitebackground").click(function() { 

      var image = new Image(); 

      image.onload = function() { 
      context.drawImage(image, 135, 230, 320, 270); 
      }; 
      image.src = 'garagedoor-whitebackground.png'; 
     }); 

     $("#housecolors").change(function() { 
      //alert("Handler for .change() called."); 
      var selected = $(this).find(':selected').text(); 
      console.log(selected); 
      if(selected = "Yellow") 
      { 
       var image = new Image(); 

       image.onload = function() { 
       context.drawImage(image, 0, 0, 1000, 604); 
       }; 
       image.src = 'garageblank-yellowhouse.png';  
      } 
     }); 
     $("#trimcolors").change(function() { 
      //alert("Handler for .change() called."); 
      var selected = $(this).find(':selected').text(); 
      console.log(selected); 
      if(selected = "Yellow") 
      { 
       var image = new Image(); 

       image.onload = function() { 
       context.drawImage(image, 0, 0, 1000, 604); 
       }; 
       image.src = 'garageblank-yellowtrim.png';   
      }  
     }); 
    }); 
    </script> 
    </body> 
    </html>

我一直在尝试更改context.globalAlpha = 1的值;通过改变为context.globalAlpha = 0.1;这确实实现了目标，但是一切都看起来很轻，以至于我无法使用画布。当然，在globalAlpha为1的情况下，我在画布上绘制的新图像会遮挡下面房子的像素，所以我也无法使用它。我正在寻找一个快乐的媒介，在DOM准备好的画布图像足够暗并且为黄色绘制的新图像不会遮挡下面房子的像素。用JavaScript在HTML canvas元素上绘制透明图像

预先感谢...

来源

2013-10-12 Giuseppe

可以，只要你包起来context.save和context.restore应用不同globalAlpha的值。

这就是你要求的吗？

context.save(); 
context.globalAlpha=.5; 
context.drawImage(imageObj1, 0, 0); 
context.restore(); 

context.save(); 
context.globalAlpha=.1; 
context.drawImage(imageObj2, 0, 0); 
context.restore();

来源

2013-10-12 01:44:11 markE

我发现我可以使用背景图片，并设置画布的透明度，以便当新的图像绘制黄色他们在globalAlpha的= 0.3出来很轻。出于某种原因，背景图像看起来像是现在使用0.3 globalAlpha绘制的。 – Giuseppe

干杯！没有看到图像很难诊断。你知道你可以用不同的不透明度（globalAlpha）绘制不同图像吗？你是在globalAlpha = 1.0上绘制背景图片，在globalAlpha = 0.30上绘制黄色图片吗？黄色图像的任何部分是否与背景图像重叠，这样背景自然会变得柔和？ – markE

这非常有趣。实际上，我将接受上面的帖子作为答案，但是我注意到我实际上做的是使用多个画布在不同的globalAlpha值上绘制在彼此的顶部。通过这种方式，我能够完成我的目标，但是我将不得不尝试使用这种方法来查看如何使用不同的globalAlpha绘制新图像。感谢您的发表。 – Giuseppe

用JavaScript在HTML canvas元素上绘制透明图像

回答

相关问题