将多个纹理应用于 javascript 画布中的不同图像答案

【问题标题】：Applying more than one texture to different images in javascript canvas将多个纹理应用于 javascript 画布中的不同图像
【发布时间】：2020-07-02 00:37:11
【问题描述】：

我正在尝试使用 html 绘制娃娃，我已经在不同的图像文件中设置了娃娃的不同部分，现在我正在尝试使用画布为每个部分加载不同的纹理：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas with textures</title> 
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<script type="text/javascript">
    $(document).ready(function(){

        var c = document.getElementById("previewCanvas");
        var ctx = c.getContext("2d");       

        var hair = new Image();
        hair.src = "images/hair_1.png";
        //ctx.drawImage(hair, 0, 0, 300, 300);

        var head = new Image();
        head.src = "images/head_base.png";

        hair.onload = function () {

        };

        var textureSkin = new Image();
        textureSkin.src = "img/textures/texture_skin.png";


        var textureImg = new Image();
        textureImg.src = "img/textures/texture_black.png";


        textureImg.onload = function () 
        {
            var ptrn = ctx.createPattern(textureSkin, 'repeat');

            ctx.drawImage(head, 0, 0, 300, 300);

            ctx.globalCompositeOperation = 'source-atop';
            ctx.fillStyle = ptrn;
            ctx.fillRect(0, 0, 300, 300);

            ctx.drawImage(hair, 0, 0, 300, 300);            
        }
        });

</script>


    <body>
            <canvas id= "previewCanvas" height="600" width="400"/>  
    </body>
</html>

前面的代码输出给我这个组合图像：

如果我在绘制头发后尝试加载新纹理（因为我希望头发也具有自定义纹理），请执行以下操作：

    textureSkin.onload = function () 
    {
        var ptrn = ctx.createPattern(textureSkin, 'repeat');        
        ctx.drawImage(head, 0, 0, 300, 300);

        ctx.globalCompositeOperation = 'source-atop';
        ctx.fillStyle = ptrn;
        ctx.fillRect(0, 0, 300, 300);
    }       

    var textureImg = new Image();
    textureImg.src = "img/textures/texture_black.png";


    textureImg.onload = function () 
    {

        var ptrn = ctx.createPattern(textureImg, 'repeat'); 
        ctx.drawImage(hair, 0, 0, 300, 300);            
        ctx.globalCompositeOperation = 'source-atop';
        ctx.fillStyle = ptrn;
        ctx.fillRect(0, 0, 300, 300);


    }
    });

两个图像被合并，最后一个纹理（textureImg）被应用：

对于同一画布中的不同图像，加载不同纹理的正确方法是什么？

干杯

【问题讨论】：

标签： javascript canvas html5-canvas

【解决方案1】：

两张图片看起来组合在一起，因为您使用的是“重复”。尝试使用“不重复”。另外，请给出纹理的准确坐标。

见下面代码sn-p：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas with textures</title> 
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<script type="text/javascript">
var ctx;
var textureSkin;
    document.addEventListener("DOMContentLoaded", function(event) { 

        var c = document.getElementById("previewCanvas");
        ctx = c.getContext("2d");       

        var hair = new Image();
        hair.src = "http://www.jawad.pk/images/mus.png";
        //ctx.drawImage(hair, 0, 0, 300, 300);

        var head = new Image();
        head.src = "http://www.jawad.pk/images/head.png";



        textureSkin = new Image();
        textureSkin.src = "http://www.jawad.pk/images/mus2.png";


        textureSkin.onload = function () 
        {
            var ptrn = ctx.createPattern(textureSkin, 'no-repeat');

            ctx.drawImage(head, 0, 0, 300, 300);

            ctx.globalCompositeOperation = 'source-atop';
            ctx.fillStyle = ptrn;            
			
			ctx.drawImage(hair, 100, 200, 100, 38);
			
					
        }
		
		
		
        });
		
		function applyTexture()
		{
			ctx.drawImage(textureSkin, 100, 200, 100, 38); 
		}

</script>




    <body>
		<a style="border:1px solid red; color:red; cursor:pointer" onclick="applyTexture()">apply texture</a>
            <canvas id= "previewCanvas" height="300" width="400"/>  
		
    </body>
</html>

【讨论】：

您好，在您的示例中，在为小胡子设置纹理后，您如何将纹理应用到面部图像？

【解决方案2】：

您可以使用另一个画布作为暂存区域，在其中为每个部分应用不同的纹理。根据您的目标浏览器，您可能可以使用OffscreenCanvas。

【讨论】：