如何清除HTML画布中某个部分的反转？

Question

I have a Square in HTML5 Canvas :(我们假设）

context.beginPath();
context.moveTo(0,0);
context.lineTo(0, 100);
context.lineTo(100, 100);
context.lineTo(100, 0);
context.closePath();

这是一个100 * 100平方。在400 * 400画布中，我想要显示100 * 100的方块并隐藏其他所有内容。我该怎么做？

  

注意：我刚举了一个方形的例子。我的身材很复杂   要裁剪的帆布。其他是清除。因此，我专门寻找一个裁剪或副本到不同的画布并粘贴回来。 :)以下是我想要做的。我只需要保留明星中的内容。删除其他所有内容。

Answer 1

您可以尝试.clip()功能。您可以使用.save()将状态保存到剪辑后的.restore()，这样就不具有破坏性。您可以将路径设置为您想要的任何路径，它将创建该形状的矢量蒙版。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function () {
    context.save();
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(0, 100);
    context.lineTo(70, 200);
    context.lineTo(100, 0);
    context.closePath();
    context.clip();
    context.drawImage(img, 0, 0);
    context.restore();
}

img.src = "https://www.noao.edu/image_gallery/images/d2/m51-400.jpg";

See Fiddle here

Answer 2

如果在路径命令中定义了“复杂形状”（比如示例中的方形路径命令 - 只有路径更复杂），那么您可以使用合成来消除路径中除像素之外的所有像素： / p>

（1）定义路径并用纯色填充

（2）将合成设置为source-in，仅在存在现有实体像素且其他所有像素都透明的情况下绘制新像素。

    context. globalCompositeOperation='source-in';

（3）绘制你的星空图像。图像将仅显示在路径内 - 其他所有内容都是透明的。

这是示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/water.jpg";
function start(){
  var points=[];
  points.push({x:150,y:0});
  points.push({x:200,y:100});
  points.push({x:250,y:100});
  points.push({x:225,y:150});
  points.push({x:250,y:200});
  points.push({x:100,y:200});
  points.push({x:150,y:0});

  ctx.beginPath();
  ctx.moveTo(points[0].x,points[0].y);
  for(var i=0;i<points.length;i++){
    ctx.lineTo(points[i].x,points[i].y);
  }
  ctx.closePath();
  ctx.fill()

  ctx.globalCompositeOperation='source-in'

  ctx.drawImage(img,0,0);

}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

Answer 3

尝试这样的事情

context.fillStyle = "rgba(255, 255, 255, 1)";
context.fillRect(0, 100, 400, 400);
context.fillStyle = "rgba(255, 255, 255, 1)";
context.fillRect(100, 0, 400, 400);

http://jsfiddle.net/xqzxawyb/1/

Answer 4

<canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(0,0,100,100);
ctx.stroke();

DEMO：http://jsfiddle.net/q776zjdx/