如何使用HTML5的<canvas> clip()函数

Question

我刚接触HTML5的<canvas>，尝试着做些东西，实际上是画PORTAL2的标志 :)

到目前为止，我已经完成了这么多

但是你可以看到腿伸出了墙外，我想知道如何去掉多余的油漆。

我猜可以用 clip() 函数来实现，但我不确定该如何使用它。

这就是我想要的效果

这是我正在尝试的代码，也可以在JS Bin上找到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();

请帮忙。

- Shekhar_Pro

---

i) 将其变为空白的白色垂直线 ii) 与蓝色垂直线重叠并靠近... - Anand Thangappan

嗯……不太确定你的意思。但是当我调用“clip”函数时，它也会剪裁膝盖 :( - Shekhar_Pro

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
...

- Arjan

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();

- Anand Thangappan

---

做这件事的代码已经有了，但你只是在增加墙的宽度...不幸的是，那不是我想要的。 - Shekhar_Pro

抱歉，但我正在尽力使其尽可能接近原始内容。 - Shekhar_Pro