html canvas内存溢出,html - 使用JavaScript在HTML canvas元素上绘制透明图像 - 堆栈内存溢出...

Garage Door Application

body {

margin: 0px;

padding: 0px;

}

#myCanvas

{

//background-color: blue;

}

.garagedoorthumbnail:hover

{

border: 1px solid green;

}

Trim Colors

Red

Green

Blue

Yellow

Purple

House Colors

Red

Green

Blue

Yellow

Purple

White Background

$(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';

}

});

});

我一直在尝试更改context.globalAlpha = 1的值； 通过更改为context.globalAlpha = 0.1; 确实达到了目标，但是一切看起来都很轻，我无法使用画布。 当然，在globalAlpha为1的情况下，我在画布上绘制的新图像会遮挡下面房屋的像素，因此我也不能使用它。 我正在寻找一种快乐的介质，其中在DOM ready上绘制的画布图像足够暗，而以黄色绘制的新图像不会遮挡下面房屋的像素。

预先感谢...