master

分支 (2)

管理

管理

master

liuguanghtml

html
/
圆饼..html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>圆饼</title>
</head>
<body>
	<canvas id="xc" width="600" height="800" style="background: silver"></canvas>
	<script type="text/javascript">
		var w=document.getElementById('xc');
		var wgc=w.getContext("2d");

		//圆饼
		wgc.beginPath();
		wgc.shadowOffsetX=5;
		wgc.shadowOffsetY=-5;
		wgc.shadowBlur=10;
		wgc.shadowColor="red"
		wgc.fillStyle="red";
		wgc.moveTo(300,300)
		wgc.arc(300,300,100,0,Math.PI*1.5);
		wgc.fill();
		wgc.beginPath();
		wgc.fillStyle="black";
		wgc.fillText("25%",270,350);
		wgc.closePath();

		wgc.beginPath();
		wgc.shadowOffsetX=5;
		wgc.shadowOffsetY=-5;
		wgc.shadowBlur=10;
		wgc.shadowColor="aqua"
		wgc.fillStyle="aqua";
		wgc.moveTo(300,300)
		wgc.arc(300,300,100,1.3,Math.PI*1.5,true);
		wgc.fill();
		wgc.beginPath();
		wgc.fillStyle="black";
		wgc.fillText("15%",330,350);
		wgc.closePath();

		wgc.beginPath();
		wgc.shadowOffsetX=5;
		wgc.shadowOffsetY=-5;
		wgc.shadowBlur=10;
		wgc.shadowColor="yellow"
		wgc.fillStyle="yellow";
		wgc.moveTo(300,300)
		wgc.arc(300,300,100,2.9,Math.PI*1.5);
		wgc.fill();
		wgc.beginPath();
		wgc.fillStyle="black";
		wgc.fillText("35%",240,280);
		wgc.closePath();

		wgc.beginPath();
		wgc.shadowOffsetX=5;
		wgc.shadowOffsetY=-5;
		wgc.shadowBlur=10;
		wgc.shadowColor="lightpink"
		wgc.fillStyle="lightpink";
		wgc.moveTo(300,300)
		wgc.arc(300,300,100,0.2,Math.PI*1.5,true);
		wgc.fill();
		wgc.beginPath();
		wgc.fillStyle="black";
		wgc.fillText("25%",330,270);
		wgc.closePath();


		//文字阴影效果
		wgc.beginPath();
		wgc.shadowOffsetX=5;
		wgc.shadowOffsetY=-5;
		wgc.shadowBlur=10;
		wgc.shadowColor="aqua"
		wgc.font="60px 华文彩云";
		wgc.fillStyle="aqua";
		wgc.fillText("厦门兴才",60,80);
		wgc.closePath();

	</script>
</body>
</html>