HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canva

2020-04-24 19:55:42易采站长站整理

    <head>  
        <meta charset="UTF-8">  
    </head>  
    <style type="text/css">  
        canvas{border:dashed 2px #CCC}   
    </style>  
    <script type="text/javascript">  
        function $$(id){   
            return document.getElementById(id);   
        }   
        function pageLoad(){   
            var can = $$(‘can’);   
            var cancans = can.getContext(‘2d’);   
            cans.beginPath();   
            cans.arc(200,150,100,0,Math.PI*2,true);   
            cans.closePath();   
            cans.fillStyle = ‘green’;//本来这里最初使用的是red,截图一看,傻眼了,怕上街被爱国者打啊,其实你懂的~~   
            cans.fill();   
        }   
    </script>  
    <body onload="pageLoad();">  
        <canvas id="can" width="400px" height="300px">4</canvas>  
    </body>  
</html>  
  

这里的arc方法的用法是 arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是(圆心X坐标,圆心Y坐标,半径,开始角度(弧度),结束角度弧度,是否按照顺时针画);

arc中各参数比较:

a、cans.arc(200,150,100,0,Math.PI,true);

c、cans.arc(200,150,100,0,Math.PI/2,true);