Холст - применить глобальную композицию к нескольким изображениям внутри одного холста - PullRequest
1 голос
/ 23 мая 2019

Я работаю над задачей по нанесению рисунка на несколько частей рубашки. Изображение рубашки не может быть одним изображением. Это делает с маленькими изображениями как левая рука, правая рука, воротник и т.д ... Теперь я хочу применить рисунок или цвет ко всем частям внутри холста.

<canvas id="canvas" width=250 height=250  style="margin-left: 100px; background: pink"></canvas>

<script type="text/javascript">
    var img1 = new Image, img2 = new Image, cnt = 2,   img3 = new Image,
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

// image loading for demo (ignore)
img1.onload = img2.onload = function() {if (!--cnt) go()};


// Left Arm 
img1.src = "left_arm.png";   
//Right Arm
img3.src = "right_arm.png"; 

// Pattern Image
img2.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlncafGCzVapWvTID6msFfk7OWtQSCEEnbKSLQhzVk1cPqe9CQ";   //  



function go() {
  // create a pattern  
  ctx.fillStyle = ctx.createPattern(img2, "repeat");
  // // fill canvas with pattern
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  // // use blending mode multiply
  ctx.globalCompositeOperation = "multiply";
  // // draw sofa on top
  ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);
  ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);  

}
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...