如何在画布中选择特定区域？

Question

我是画布的新手，我有一个图片myimg.jpg，我已将此图片转换为画布，我正在尝试为脚跟应用一些图案图像。

我无法做到。这是我的截图：

我怎样才能完成它。

<div id="myId">
  <canvas id="canvaswrapper" width="660" height="540"></canvas>
</div>

 function drawImage(){
    var ctx = $("canvas")[0].getContext("2d"),
        img = new Image();
    img.onload = function(){
      ctx.drawImage(img, 0, 0, 500, 500);
      ctx.beginPath();
      var img2= new Image();
      var w;
      var h;
      img2.src = "http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG";
      var pattern = ctx.createPattern(img2, "repeat");
      ctx.fillStyle = pattern;
      ctx.fillRect(0, 0, w, h);
      ctx.arc(300,305,50,0,2*Math.PI);
      ctx.fill();
      ctx.stroke();
   };
   img.src = "myimg.jpg"; 
 }
 drawImage();

Answer 1

您可以使用适合图像顶部的图像蒙版定义要填充的区域 - 此步骤适用于Photoshop / GIMP。

例如，让你的鞋子原样：

为它创建一个遮罩，将愈合留在原始位置（这样可以更容易地将其绘制回来 - 你总是可以裁剪它并使用偏移来绘制它）。 重要提示：背景必须透明：

然后使用以下步骤超级强加模式：

1. 加载模式并将define定义为填充模式
2. 将面具绘制到空白画布
中
3. 可选步骤：根据需要调整转换（翻译，缩放）
4. 选择复合模式＆＃34; source-atop＆＃34;
5. 填充画布
6. 选择复合模式＆＃34; destination-atop＆＃34;
7. 在顶部绘制主图像（将显示在蒙版/图案后面）
8. 可选步骤：使用混合模式绘制原始蒙版图像＆＃34;乘以＆＃34;添加阴影和高光（在IE中不起作用）。这将有助于创造一种深度的幻觉。对于IE，使用缩小的alpha或仅包含阴影等的单独图像将其绘制在顶部可以是一个选项

<强>结果



实施例

＆＃13;
＆＃13;
var iShoe = new Image, iMask = new Image, iPatt = new Image, count = 3;
iShoe.onload = iMask.onload = iPatt.onload = loader;
iShoe.src = "http://i.stack.imgur.com/hqL1C.png";
iMask.src = "http://i.stack.imgur.com/k5XWN.png";
iPatt.src = "http://i.stack.imgur.com/CEQ10.png";

function loader() {
  if (--count) return;  // wait until all images has loaded

  var ctx = document.querySelector("canvas").getContext("2d"),
      pattern = ctx.createPattern(iPatt, "repeat");

  // draw in mask
  ctx.drawImage(iMask, 0, 0);
  
  // change comp mode
  ctx.globalCompositeOperation = "source-atop";
  
  // fill mask
  ctx.scale(0.5, 0.5);                 // scale: 0.5
  ctx.fillStyle = pattern;             // remember to double the area to fill:
  ctx.fillRect(0, 0, ctx.canvas.width*2, ctx.canvas.height*2);
  ctx.setTransform(1,0,0,1,0,0);       // reset transform
  
  // draw shoe behind mask
  ctx.globalCompositeOperation = "destination-atop";
  ctx.drawImage(iShoe, 0, 0);
  
  // to make it more realistic, add mask in blend mode (does not work in IE):
  ctx.globalCompositeOperation = "multiply";
  if (ctx.globalCompositeOperation === "multiply") {
    ctx.drawImage(iMask, 0, 0);
  }
}
＆＃13;
<canvas width=281 height=340></canvas>
＆＃13;
＆＃13;
＆＃13;