<!DOCTYPE html> <html> <head> <script language="javascript"> function DrawArc() { var drawingCanvas = document.getElementById('sampleCanvas'); if(drawingCanvas.getContext) { var context = drawingCanvas.getContext('2d'); context.clearRect(0,0,600,600); context.lineWidth=1; context.strokeStyle='#ff0000'; context.fillStyle='#ff0000'; var r=100;//radius var sa=0/360 * Math.PI;//set 0 for circle var ea=270/360 * 2 * Math.PI;//set 2 * Math.PI for circle var t=200; var l=200; var direction=true;//set false for anticlockwise context.beginPath(); context.arc(l,t,r,sa,ea,false); //context.closePath(); // to close arc path context.stroke(); //context.fill();//to fill inside arc } } </script> </head> <body> <canvas id="sampleCanvas" width="600" height="600" style="border:1px solid #000000"> <p>Your browser doesn't support canvas.</p> </canvas> <script> DrawArc(); </script> </body> </html>
标签：html5,canvas
相关文章
精彩导读
热门资讯
关注我们
