作者在 2018-09-01 22:32:50 发布以下内容
<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>
