javascript 如何使用 HTML5 <canvas> clip()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5801116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use HTML5 <canvas> clip()
提问by Shekhar_Pro
I am new to HTML5 <canvas>and was trying to make something, actually draw the PORTAL2 logo :).
我是 HTML5 的新手<canvas>，正在尝试制作一些东西，实际上是绘制 PORTAL2 徽标 :)。
Till now I have got it so far
到目前为止我已经得到了它
but as you can see leg is protruding out of the wall, i want to know how to chip off that extra paint.
但正如你所看到的腿从墙上突出来，我想知道如何去除多余的油漆。
I guess it can be done with clip()function but I'm not sure how to use it.
我想它可以用clip()函数来完成，但我不知道如何使用它。
Here is what i want
这是我想要的
This is the code I'm trying, also available at JS Bin here http://jsbin.com/exado5/edit
这是我正在尝试的代码，也可在此处的 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();
Please help.
请帮忙。
采纳答案by Arjan
Add this:
添加这个：
...
//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
...
回答by Anand Thangappan
Change the code and check it
更改代码并检查它
//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();
