在HTML5画布中，如何用我选择的背景遮罩图像?

本文介绍了在HTML5画布中，如何用我选择的背景遮罩图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图通过画布'globalCompositeOperation来实现这一点，但是没有运气，所以我在这里问.这里也有类似的问题，但是我没有找到我的案子.

I tried to make this happen with canvas' globalCompositeOperation, but had no luck so I'm asking here. There are similar questions here, but I did not find my case among them.

我的画布区域中有这样的图层(从下到上的绘制顺序):

I have layers in my canvas area as so (drawing order from bottom to top):

画布底部填充有纯白色(#fff，带有fillRect)
第一张图片house是一所房子的图片.背景是透明的. (请参见下文)
第二张图像roofOverlay是覆盖的掩盖"图像，其屋顶区域被染成红色(可以是任何颜色，但为清晰起见，红色，请参见下文)

The canvas base is filled with pure white (#fff, with fillRect)
First image house is a picture of a house. The background is transparent. (see below)
Second image roofOverlay is an overlay "masking" image that has the roof area coloured red (can be anything, but red for clarity, see below)

这两个图像占据了整个画布，并且彼此完美地对齐，因此红色的屋顶区域与房子匹配.

Both images take up the whole canvas and are lined up perfectly on top of each other, so that the red roof area matches the house.

然后我有一个重复的背景repeatPattern模式，我想在红色区域内只使用 :用repeatPattern填充红色区域. (可以是任何东西，但可以是六角形或其他形状)

I then have a repeating background repeatPattern pattern what I want to use ONLY inside the red areas: to fill the red area with repeatPattern. (can be anything, but assume hexagons or whatever)

在伪代码中，理想情况是:

In pseudocode, this would ideally be something in the lines of:

roofOverlay.maskBackground(repeatPattern)

(在旁注中，我也希望能够弄乱背景图案的HSL值，但我认为，一旦使图案均匀显示，这将非常简单)

(On a sidenote, I would also like to be able to mess with the background pattern HSL-values, but I think that's quite straightforward once I get the pattern to even display)

预期结果将是一栋房屋的屋顶纹理上带有repeatPattern图像.

The expected result would be a house which roof is textured with the repeatPattern image.

注意:我知道带蒙版的剪切路径，但是我不能在这里使用它们.该示例已得到简化，并且绘制多个不同房屋的所有路径将导致过多的工作.我只有覆盖屋顶的png文件.

Note: I'm aware of clipping paths with masks, but I cannot use them here. The example is simplified and drawing all the paths for multiple different houses would be way too much work. I only have the overlayed png-files for the roof.

house

roofOverlay

推荐答案

以下是使用"roofOverlay"将屋顶图案"合成在房屋"顶部的方法

这是一个多部分过程:

在画布#1上画房子.
在画布#2上绘制红色RoofOverlay.
设置canvas#2的context.globalCompositeOperation ='source-in'
在canvas#2上绘制所需的图案
合成将使您所需的图案替换红色叠加层-仅在红色叠加层区域中.

这是在屋顶上放草的小提琴: http://jsfiddle.net/m1erickson/SWP6v/

Here is a Fiddle that loads grass on your roof: http://jsfiddle.net/m1erickson/SWP6v/

这是在屋顶上使用格子图案填充的代码:

And here is code that uses a lattice pattern fill on your roof:

注意:我假设您希望房子和屋顶位于单独的画布上，以便您可以翻阅各种屋顶选择.如果您需要将所有东西都放在一张画布上，则只需将屋顶画布绘制到房屋画布上即可.

Note: I'm assuming that you want the house and roof on separate canvases so you can flip through a variety of roof choices. If you need everything on 1 canvas, you can just draw the roof canvas onto the house canvas.

<!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>

这篇关于在HTML5画布中，如何用我选择的背景遮罩图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！