如何清除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/