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 に答える