如何清除HTML画布中某节的反面？

Question

我在HTML5画布中有一个Square ：（假设）

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

在这里看到小提琴 。

Answer 2

如果您在路径命令中定义了“复杂形状”（例如您的示例中的方形路径命令-仅路径更复杂），则可以使用合成消除路径中除像素以外的所有像素：

（1）定义您的路径并用纯色填充它，

（2）将“ compositing”设置为“ 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();

演示： http : //jsfiddle.net/q776zjdx/