Применение более одной текстуры к разным изображениям на javascript холсте - PullRequest
Новая
       8

Применение более одной текстуры к разным изображениям на javascript холсте

2 голосов
/ 05 мая 2020

Я пытаюсь нарисовать куклу, используя 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>

Предыдущий код выводит мне это комбинированное изображение:

enter image description here

Если я попытаюсь загрузить новую текстуру после рисования волос (как Я хочу, чтобы у волос тоже была собственная текстура), сделав что-то вроде этого: 

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

enter image description here

Как правильно загружать разные текстуры для разных изображений на одном холсте?

Ура

Ответы [ 2 ]

0 голосов
/ 01 июля 2020

Вы можете использовать другой холст в качестве промежуточной области для применения различных текстур к каждой из частей. В зависимости от вашего целевого браузера (ов) вы можете использовать OffscreenCanvas .

0 голосов
/ 05 мая 2020

Оба изображения выглядят объединенными, потому что вы используете "повтор". Попробуйте использовать «без повтора». Также укажите точные координаты текстуры.

См. Ниже фрагмент кода: 

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