大佬教程收集整理的这篇文章主要介绍了javascript – 在HTML5画布中,如何使用我选择的背景屏蔽图像？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我在画布区域中有图层(从下到上绘制顺序)：
>画布底座上装满纯白色(#fff,带fillRect)
>第一个图像的房子是一个房子的图片.背景是透明的. (见下文)
>第二幅图像屋顶画面是覆盖“掩蔽”图像,屋顶区域呈红色(可以是任何东西,但为了清晰起见,红色见下文)
这两幅图像占据了整个画布,并且完全排列在彼此之间,使得红屋顶区域与房屋相匹配.
然后我有一个重复的背景repeatPattern模式,我只想在红色区域内使用：用repeatPattern填充红色区域. (可以是任何东西,但假设六边形或其他)
在伪代码中,这将理想地是以下行为：
roofOverlay.maskBACkground(repeatPattern)
(在sidenote,我也想能够混淆背景图案HSL值,但我认为这是非常简单的一旦我得到图案甚至显示)
预期结果：
预期的结果将是一个房子,屋顶用repeatPattern图像纹理化.
注意：我知道使用面具的剪裁路径,但我不能在这里使用它们.这个例子是简化的,并且绘制多个不同房屋的所有路径将是太多的工作.我只有顶部的覆盖的png文件.
图片供参考
屋
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>
以上是大佬教程为你收集整理的javascript – 在HTML5画布中,如何使用我选择的背景屏蔽图像？全部内容，希望文章能够帮你解决javascript – 在HTML5画布中,如何使用我选择的背景屏蔽图像？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。