如何從畫布

Question

刪除現有的裁剪區域，我使用ctx.scale（）方法canvas.clipTo功能，給予不同的畫布形狀。 現在我想，當我在選擇框中選擇牆，從我的畫布刪除現有裁剪區域，我使用fabric.js人有任何想法如何解決這個問題？ 這裏是我的代碼 // HTML

<canvas id="c" width="632" height="485"></canvas> 
<span class="tt1">DECAL SHAPE</span> 
<select name="Decal Shape" id="clipingShape" style="height:30px;"> 
<option> WALL </option> 
<option> CIRCLE </option> 
<option> OVAL </option> 
<option> HORIZONTAL RECTANGLE </option> 
<option> VERTICAL RECTANGLE </option>             
</select> 

腳本//

var canvas = new fabric.Canvas('c'); 
$("#clipingShape").change(function(e){ 
var w; 
var h; 
var ctx = canvas.getContext('2d'); 
var shape =$('#clipingShape :selected').val(); 
    canvas.backgroundColor = 'red'; 
    if(shape=="WALL") 
    { 
alert("how to remove cloping"); 
    } 
canvas.clipTo = function(ctx) { 
if(shape=="OVAL") 
{ 
w=canvas.width/4; 
h=canvas.height/2.4; 
ctx.save(); 
ctx.scale(2, 1.2); 
ctx.arc(w, h, 155, 0, 2 * Math.PI, true); 
} 
if(shape=="CIRCLE") 
{ 
w=canvas.width/2; 
h=canvas.height/2; 
ctx.save(); 
ctx.arc(w, h, 230, 0, Math.PI * 2,true); // Circle Shape 
} 
if(shape=="VERTICAL RECTANGLE") 
{ 
w=canvas.width - 217; 
h=canvas.height - 70; 
//alert(w); 
//alert(h); 
ctx.save(); 
ctx.rect(110, 35, w, h); 
} 
    if(shape=="HORIZONTAL RECTANGLE") 
{ 
w=canvas.width - 100; 
h=canvas.height - 100; 
ctx.save(); 
ctx.rect(50, 50, w, h); 
} 
    if(shape=="WALL") 
{ 
w=canvas.width - 100; 
h=canvas.height - 100; 
ctx.save(); 
ctx.clear(); 
} 
ctx.stroke(); 
ctx.restore(); 

}; 
canvas.renderAll(); 

}); 
// canvas.renderAll(); 
var text; 
text = new fabric.Text('Honey', { 
    fontSize: 50, 
    left: 100, 
    top: 100, 
    lineHeight: 1, 
    originX: 'left', 
    fontFamily: 'Helvetica', 
    fontWeight: 'bold' 
}); 
    canvas.add(text); 

這裏是我的Fiddle Demo

Answer 1

這一個可能的幫助。 http://jsfiddle.net/xadqg/13/

canvas.clipTo = null; 
canvas.backgroundColor = 'white'; 
canvas.renderAll();