如何使用HTML5 <canvas> clip（）

Question

我是HTML5 <canvas>的新手，試圖製作一些東西，實際上繪製了PORTAL2徽標:)。

到現在我已完成了迄今爲止

，但你可以看到腿伸出出牆，我想知道如何削掉額外的油漆。

我想這可以用clip()函數完成，但我不知道如何使用它。

這裏是我想

這是我想要的代碼，也可在JS斌這裏http://jsbin.com/exado5/edit

//function to convert deg to radian 
function acDegToRad(deg) 
{ 
    return deg* (-(Math.PI/180.0));  
} 

//set fill color to gray 
ctx.fillStyle = "rgb(120,120,120)"; 
//save the current state with fillcolor 
ctx.save(); 

//draw 2's base rectangle 
ctx.fillRect(20,200,120,35); 
//bring origin to 2's base 
ctx.translate(20,200); 
//rotate the canvas 35 deg anti-clockwise 
ctx.rotate(acDegToRad(35)); 
//draw 2's slant rectangle 
ctx.fillRect(0,0,100,35); 
//restore the canvas to reset transforms 
ctx.restore(); 
//set stroke color width and draw the 2's top semi circle 
ctx.strokeStyle = "rgb(120,120,120)"; 
ctx.lineWidth = 35; 
ctx.beginPath(); 
ctx.arc(77,135,40,acDegToRad(-40),acDegToRad(180),true); 
ctx.stroke(); 

//reset canvas transforms 
ctx.restore(); 

//change color to blue 
ctx.fillStyle = "rgb(0,160,212)"; 
//save current state of canvas 
ctx.save(); 
//draw long dividing rectangle 
ctx.fillRect(162,20,8,300); 
//draw player head circle 
ctx.beginPath(); 
ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360)); 
ctx.fill(); 

//start new path for tummy :) 
ctx.beginPath(); 
ctx.moveTo(170,90); 
ctx.lineTo(230,140); 
ctx.lineTo(170,210); 
ctx.fill(); 

//start new path for hand 
//set lineCap and lineJoin to "round", blue color 
//for stroke, and width of 25px 
ctx.lineWidth = 25; 
ctx.lineCap = "round"; 
ctx.strokeStyle = "rgb(0,160,212)"; 
ctx.lineJoin = "round"; 
ctx.beginPath(); 
ctx.moveTo(222,150); 
ctx.lineTo(230,190); 
ctx.lineTo(270,220); 
ctx.stroke(); 

//begin new path for drawing leg 
ctx.beginPath(); 
ctx.moveTo(160,210); 
ctx.lineTo(195,260); 
ctx.lineTo(160,290); 
ctx.stroke(); 

請幫助。

Answer 1

補充一點：

... 
//reset canvas transforms 
ctx.restore(); 

ctx.beginPath(); 
ctx.moveTo(162, 20); 
ctx.lineTo(162, 320); 
ctx.lineTo(300, 320); 
ctx.lineTo(300, 20); 
ctx.clip(); 

//change color to blue 
ctx.fillStyle = "rgb(0,160,212)"; 
//save current state of canvas 
... 

Answer 2

更改代碼，並檢查它

//change color to blue 
ctx.fillStyle = "rgb(0,160,212)"; 
//save current state of canvas 
ctx.save(); 
//draw long dividing rectangle 
ctx.fillRect(157,20,15,300); 
//draw player head circle 
ctx.beginPath(); 
ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360)); 
ctx.fill(); 

//start new path for tummy :) 
ctx.beginPath(); 
ctx.moveTo(170,90); 
ctx.lineTo(230,140); 
ctx.lineTo(170,210); 
ctx.fill(); 

//start new path for hand 
//set lineCap and lineJoin to "round", blue color 
//for stroke, and width of 25px 
ctx.lineWidth = 25; 
ctx.lineCap = "round"; 
ctx.strokeStyle = "rgb(0,160,212)"; 
ctx.lineJoin = "round"; 
ctx.beginPath(); 
ctx.moveTo(222,150); 
ctx.lineTo(230,190); 
ctx.lineTo(270,220); 
ctx.stroke(); 

//begin new path for drawing leg 
ctx.beginPath(); 
ctx.moveTo(170,210); 
ctx.lineTo(200,260); 
ctx.lineTo(170,290); 
ctx.stroke();