如何使用HTML5
|
我是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();
请帮忙。
没有找到相关结果
已邀请:
2 个回复
畦桨存灯
细瑞