Javascript 如何使用HTML5<；帆布>；剪辑（）

我刚接触HTML5

，当时正试图制作一些东西，实际上画的是PORTAL2徽标：）

到目前为止，我已经做到了

但正如你们所看到的，我的腿已经伸出墙外，我想知道如何去掉多余的油漆

我想它可以通过

clip（）

函数来完成，但我不知道如何使用它

这是我想要的

这是我正在尝试的代码，也可以在JS-Bin中找到

---

请帮助。

更改代码并检查它

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

添加以下内容：

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

---

i） 使其为空白白色垂直线ii）重叠并靠近蓝色垂直线…嗯。。。。我不知道你的意思。。但当我叫clip时，它也会夹住膝盖：（这样做了。）但你只是增加了墙的宽度…不幸的是，我不想担心，但我正试图使它尽可能接近原来的宽度

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