javascript – 在HTML5画布中,如何使用我选择的背景屏蔽图像?

前端之家收集整理的这篇文章主要介绍了javascript – 在HTML5画布中,如何使用我选择的背景屏蔽图像?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图通过画布“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>
原文链接:https://www.f2er.com/js/151163.html

猜你在找的JavaScript相关文章