canvas---HTML5新特性 

画圆及填充文字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
            canvas{
                background: #ccc;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="600" height="600"></canvas>
    </body>
    <script type="text/javascript">
    var canvas=document.getElementById('canvas');
    var ctx=canvas.getContext('2d');

    ctx.strokeStyle='#fff';
    ctx.beginPath();
     ctx.arc(300,300,50,0,2*Math.PI);
    //  ctx.closePath();
    //  ctx.fillStyle='grey';
    //  ctx.fill();
     ctx.stroke();

     //
     ctx.beginPath();
     ctx.strokeStyle='green';
     ctx.arc(300,300,50,0.5*Math.PI,1.5*Math.PI);
     ctx.stroke();
    //   ctx.closePath();
    ctx.font='bold 19px arial'
    ctx.fillStyle='red';
    ctx.fillText('50%',285,310)
    </script>
</html>

　　

 

posted @ 2017-09-19 17:27  地铁程序员  阅读(188)  评论(0)  编辑  收藏  举报