Ответ 1
Вот как создать свой "шаблон крыши" поверх вашего "дома", используя "roofOverlay"
Это многочастный процесс:
- Нарисуйте дом на холсте # 1.
- Нарисуйте красную крышу. Оверлей на холсте # 2.
- Установить холст # 2s context.globalCompositeOperation = 'source-in'
- Нарисуйте свой желаемый узор на холсте # 2
- Композиция заставит ваш желаемый шаблон заменить красный накладной только в области красного наложения.
Вот скрипка, которая загружает траву на вашей крыше: http://jsfiddle.net/m1erickson/SWP6v/
И вот код, который использует заливку решетки на крыше:
Примечание. Я предполагаю, что вы хотите, чтобы дом и крыша были на отдельных холстах, чтобы вы могли перелистывать различные варианты крыши. Если вам нужно все на одном холсте, вы можете просто нарисовать полотно крыши на холсте дома.
<!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>