绘图

html/css/javascript | 2018-09-01 22:32:50 | 阅读 169 次 | 评论(0)
<html>
<head>	
<meta charset=utf-8" />
<title>canvas</title>
</head>

<body>
<canvas id="myCanvas" width="300" height="300" style="border: 1px
solid #d3d3d3;"> your bolowr is not draw!
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

	

	ctx.beginPath();	
	ctx.moveTo(220,120);//right point
	ctx.arc(120,120,100,0,2*Math.PI);	
	ctx.closePath();
	ctx.fillStyle="blue";	
	ctx.fill();
	
	ctx.beginPath();	
	ctx.moveTo(120,120);//圆心
	ctx.lineTo(120,20);//up
	ctx.lineTo(120-100*Math.cos(Math.PI/6),120+100*Math.sin(Math.PI/6));//left down
	ctx.lineTo(120,120);
	ctx.closePath();
	ctx.fillStyle="gold";//gold
	ctx.fill();	
	ctx.beginPath();	
	ctx.moveTo(120,120);//圆心
	ctx.lineTo(120,20);//up
	ctx.lineTo(120+100*Math.cos(Math.PI/6),120+100*Math.sin(Math.PI/6));//rignt down
	ctx.lineTo(120,120);
	ctx.closePath();
	ctx.fillStyle="yellow";//yellow
	ctx.fill();
	

	ctx.beginPath();	
	ctx.moveTo(120,120);//圆心
	ctx.lineTo(120-100*Math.cos(Math.PI/6),120+100*Math.sin(Math.PI/6));//left down
	ctx.lineTo(120+100*Math.cos(Math.PI/6),120+100*Math.sin(Math.PI/6));//rignt down
	ctx.lineTo(120,120);
	ctx.closePath();
	ctx.fillStyle="white";//white
	ctx.fill();
	
	ctx.font="30px Georgia";//Arial   Georgia
	ctx.fillText('stars',85,120);
	
	stroke();//用  ctx.stroke() 有线条痕迹
	
	
	

	
	
</script>
</body>
</html>
文章评论,共0条
游客请输入验证码
浏览159883次
最新评论