在HTML5画布中,如何使用我选择的背景屏蔽图像？
Har*_*nen 10 javascript html5 png canvas masking
我尝试用帆布来实现这一点globalCompositeOperation,但没有运气,所以我在这里问.这里有类似的问题,但我没有找到他的案例.
我的画布区域中有图层(从下到上绘制顺序):
- 画布底座填充纯白色(#fff,带有fillRect)
- 第一张图片
house是一张房子的照片.背景是透明的.(见下文) - 第二幅图像
roofOverlay是覆盖"遮蔽"图像,其屋顶区域为红色(可以是任何东西,但为了清晰起见,红色,见下文)
两幅图像占据了整个画布,并且彼此重叠排列,因此红色屋顶区域与房屋相匹配.
然后,我有一个重复的背景repeatPattern是什么我想使用模式ONLY里面的红色区域:以填补红色区域repeatPattern.(可以是任何东西,但假设六边形或其他)
在伪代码中,理想情况下,这将是:
roofOverlay.maskBackground(repeatPattern)
(在旁注中,我也希望能够混淆背景模式HSL值,但我认为一旦我得到模式甚至显示,这是非常简单的)
预期结果:
预期的结果将是屋顶用repeatPattern图像纹理化的房屋.
注意:我知道带有掩码的剪切路径,但我不能在这里使用它们.这个例子是简化的,绘制多个不同房屋的所有路径将是太多的工作.我只有屋顶覆盖的png文件.
图片供参考
house
roofOverlay
mar*_*rkE 18
以下是如何使用"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,0);
}
houseImage.src="https://dl.dropbox.com/u/1122582/stackoverflow/house.png";
ctx.drawImage(red,0,0);
var imageObj = new Image();
imageObj.onload = function() {
var pattern = ctx.createPattern(imageObj, 'repeat');
ctx.globalCompositeOperation = 'source-in';
ctx.rect(0, 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>