0 
    <!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 上绘制的画布图像足够暗，而为黄色绘制的新图像不会遮挡下面房子的像素。

预先感谢...

4

1 回答 1

3

只要将它们包装在 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-12T01:44:11.673 回答