Question

我想使用javascript将图案应用于3d图像。我有一个像这样的示例图像 enter image description here

和这样的模式

enter image description here

我想把这样的图案应用到那件衬衫我用画布把第一张图片作为画布的背景图片并使用这个javascript代码应用图案

    <!DOCTYPE html>
<html>
<head>
<titleLab></title>

<style>
#mycanvas{
border:1px solid #000000;
background-image:url('image/shirt.jpeg');
 background-size:cover
}
</style>
<script>
function drawShape(){
  // get the canvas element using the DOM
  var canvas = document.getElementById('mycanvas');

  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){


    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

    // create new image object to use as pattern
    var img = new Image();
    img.src = 'pattern.jpg';
    img.onload = function(){
       // create pattern
       var ptrn = ctx.createPattern(img,'repeat');
       ctx.fillStyle = ptrn;1
       ctx.fillRect(10,100,100,100);
    }

  } else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }
}
</script>

</head>
<body onload="drawShape();">
<canvas id="mycanvas" width="249" height="428">
</canvas>
</body>
</html>

如何识别填充衬衫的路径。当它填充它看起来像一个贴纸，如何使它现实。是否有任何图书馆可用，以便我从那里学习。需要帮助。感谢。

Answer 1

在下面的链接上有一个loog

http://jsfiddle.net/m1erickson/kzfKD/

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

var img1 = new Image();
var img = new Image();
img.onload = function () {

    img1.onload = function () {
        start();
    }
    img1.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/4jiSz1.png";
}
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png";

function start() {

    ctx.drawImage(img1, 0, 0);

    ctx.globalCompositeOperation = "source-atop";

    var pattern = ctx.createPattern(img, 'repeat');
    ctx.rect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = pattern;
    ctx.fill();

    ctx.globalAlpha = .10;
    ctx.drawImage(img1, 0, 0);
    ctx.drawImage(img1, 0, 0);
    ctx.drawImage(img1, 0, 0);

}


<canvas id="canvas" width=436 height=567></canvas>

使用javascript将图案应用于3d图像

1 个答案: