Question

我正在一项将图案应用于衬衫多个部位的任务。衬衫图像不能是单个图像。它是用小图像制作的，例如左臂，右臂，项圈等。现在，我想对画布内的所有部分应用图案或颜色。

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

画布-将全局合成应用于一个画布中的多个图像

0 个答案: