绘图

<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>
网站地图xml地图