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

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

javascript canvas html5-canvas

将多个纹理应用于javascript画布中的不同图像,javascript,canvas,html5-canvas,Javascript,Canvas,Html5 Canvas,我正在尝试使用html绘制玩偶，我已经在不同的图像文件中设置了玩偶的不同部分，现在我正在尝试使用画布将不同的纹理加载到每个部分： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv

我正在尝试使用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>

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

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

干杯

两张图片看起来是组合在一起的，因为您使用的是“重复”。尝试使用“禁止重复”。另外，为纹理提供精确的坐标

请参阅下面的代码片段：


有纹理的帆布
var-ctx；
纹理皮肤；
addEventListener（“DOMContentLoaded”，函数（事件）{
var c=document.getElementById（“previewCanvas”）；
ctx=c.getContext（“2d”）；
var hair=新图像（）；
hair.src=”http://www.jawad.pk/images/mus.png";
//drawImage（头发，0,0,300,300）；
var head=新图像（）；
head.src=”http://www.jawad.pk/images/head.png";
纹理皮肤=新图像（）；
textureSkin.src=”http://www.jawad.pk/images/mus2.png";
textureSkin.onload=函数（）
{
var ptrn=ctx.createPattern（纹理皮肤，“无重复”）；
ctx.drawImage（头部，0,0,300,300）；
ctx.globalCompositeOperation='source-top'；
ctx.fillStyle=ptrn；
ctx.drawImage（头发，10020010038）；
}
});
函数applyTexture（）
{
ctx.drawImage（纹理皮肤，10020010038）；
}
应用纹理

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

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

    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);


    }
    });