我试图通过画布“globalCompositeOperation”来实现这一点,但是没有运气,所以我在这里问.这里有类似的问题,但我没有发现我的情况.
我在画布区域中有图层(从下到上绘制顺序)：
>画布底座上装满纯白色(#fff,带fillRect)
>第一个图像的房子是一个房子的图片.背景是透明的. (见下文)
>第二幅图像屋顶画面是覆盖“掩蔽”图像,屋顶区域呈红色(可以是任何东西,但为了清晰起见,红色见下文)
这两幅图像占据了整个画布,并且完全排列在彼此之间,使得红屋顶区域与房屋相匹配.
然后我有一个重复的背景repeatPattern模式,我只想在红色区域内使用：用repeatPattern填充红色区域. (可以是任何东西,但假设六边形或其他)
在伪代码中,这将理想地是以下行为：
roofOverlay.maskBackground(repeatPattern)
(在sidenote,我也想能够混淆背景图案HSL值,但我认为这是非常简单的一旦我得到图案甚至显示)
预期结果：
预期的结果将是一个房子,屋顶用repeatPattern图像纹理化.
注意：我知道使用面具的剪裁路径,但我不能在这里使用它们.这个例子是简化的,并且绘制多个不同房屋的所有路径将是太多的工作.我只有顶部的覆盖的png文件.
图片供参考
屋
roofOverlay
解决方法
以下是使用“roofOverlay”将“屋顶图案”复合到“房屋”顶部的方法
这是一个多部分过程：
画画布上的房子#1.
>画画布#2上画红色的屋顶.
>设置画布#2的context.globalCompositeOperation =’source-in’
>在画布#2上绘制所需的图案
>合成将导致您所需的图案替换红色重叠区域中的红色重叠区域.
这是一个小提琴,在屋顶上装草：http://jsfiddle.net/m1erickson/SWP6v/
这里是使用屋顶上的格子填充的代码：
注意：我假设你想要房屋和屋顶分开的画布,所以你可以翻转各种屋顶选择.如果您需要1画布上的所有内容,您可以将屋顶画布画在画布上.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
#container{position:relative;}
#house{position:absolute; top:0; left:0;}
#canvas{position:absolute; top:0; left:0;}
</style>
<script>
$(function(){
var house=document.getElementById("house");
var ctxHouse=house.getContext("2d");
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var red=new Image();
red.onload=function(){
canvas.width=red.width;
canvas.height=red.height;
var houseImage=new Image();
houseImage.onload=function(){
house.width=houseImage.width;
house.height=houseImage.height;
ctxHouse.drawImage(houseImage,0);
}
houseImage.src="https://dl.dropBox.com/u/1122582/stackoverflow/house.png";
ctx.drawImage(red,0);
var imageObj = new Image();
imageObj.onload = function() {
var pattern = ctx.createPattern(imageObj,'repeat');
ctx.globalCompositeOperation = 'source-in';
ctx.rect(0,canvas.width,canvas.height);
ctx.fillStyle = pattern;
ctx.fill();
};
imageObj.src = "http://dl.dropBox.com/u/139992952/stackoverflow/lattice.jpg";
}
red.src="https://dl.dropBox.com/u/1122582/stackoverflow/roof-overlay.png";
}); // end $(function(){});
</script>
</head>
<body>
<div id="container">
<canvas id="house" width=300 height=300></canvas>
<canvas id="canvas" width=300 height=300></canvas>
</div>
</body>
</html>
