Canvas绘制柱状图

此浏览器不支持canvas

	<script type="text/javascript">
	var cvs = document.getElementById("cvs");
	var ctx = cvs.getContext("2d");
	
	ctx.beginPath();
	ctx.fillStyle="#ccc";
	ctx.fillRect(0,0,600,600);
	
	ctx.beginPath();
	ctx.strokeStyle="black";
	ctx.lineWidth=3;
	ctx.moveTo(100,500);
	ctx.lineTo(100,30);
	ctx.stroke();
	ctx.closePath();
	
	ctx.beginPath();
	ctx.strokeStyle="black";
	ctx.lineWidth=3;
	ctx.moveTo(100,500);
	ctx.lineTo(560,500);
	ctx.stroke();
	ctx.closePath();
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("0",70,500)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("100",60,460)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("200",60,420)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("300",60,380)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("400",60,340)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("500",60,300)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("600",60,260)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("700",60,220)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("800",60,180)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("900",60,140)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("1000",55,100)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("1月",130,530)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("2月",190,530)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("3月",250,530)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("4月",310,530)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("5月",370,530)
	
	ctx.font = "17px 楷体";
	ctx.lineWidth = 1;
	ctx.strokeStyle = "black";
	ctx.strokeText("6月",430,530)
	
	ctx.beginPath();	
	ctx.fillStyle="#6601FF";	
	ctx.rect(120,468,40,30);
	ctx.fill();
	ctx.closePath();
	
	ctx.beginPath();	
	ctx.fillStyle="#FE6500";	
	ctx.rect(180,268,40,230);
	ctx.fill();
	ctx.closePath();
	
	ctx.beginPath();	
	ctx.fillStyle="#00CBCB";	
	ctx.rect(240,208,40,290);
	ctx.fill();
	ctx.closePath();
	
	ctx.beginPath();	
	ctx.fillStyle="#FE65CB";	
	ctx.rect(300,288,40,210);
	ctx.fill();
	ctx.closePath();
	
	ctx.beginPath();	
	ctx.fillStyle="#980065";	
	ctx.rect(360,338,40,160);
	ctx.fill();
	ctx.closePath();
	
	ctx.beginPath();	
	ctx.fillStyle="#00CB00";	
	ctx.rect(420,418,40,80);
	ctx.fill();
	ctx.closePath();
	</script>
</body>