用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元素上繪製透明圖像

回答

相關問題