html5-canvas 弧(路径命令)
示例
context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle)
给定中心点,半径以及起始和终止角度绘制圆弧。角度表示为弧度。要将度数转换为弧度,可以使用以下公式:。radians=degrees*Math.PI/180;
角度0直接从圆弧的中心向右。
默认情况下,弧是顺时针绘制的,可选的[true|false]参数指示弧是逆时针绘制的:context.arc(10,10,20,0,Math.PI*2,true)
<!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid red; } </style> <script> window.onload=(function(){ //获取对canvas元素及其上下文的引用 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); //论点 var centerX=50; var centerY=50; var radius=30; var startingRadianAngle=Math.PI*2*; //从90度开始==centerY+radius var endingRadianAngle=Math.PI*2*.75; //终止于270度(以弧度为单位==PI*2*.75) // A partial circle (i.e. arc) drawn using the "arc" command ctx.beginPath(); ctx.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle); ctx.stroke(); }); //结束window.onload </script> </head> <body> <canvas id="canvas" width=200 height=150></canvas> </body> </html>
要绘制一个完整的圆,可以使EndingAngle=startingAngle+360度(360度==Math.PI2)。
<!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid red; } </style> <script> window.onload=(function(){ //获取对canvas元素及其上下文的引用 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); //论点 var centerX=50; var centerY=50; var radius=30; var startingRadianAngle=0; //从0度开始 var endingRadianAngle=Math.PI*2; //以360度结束(==PI*2以弧度表示) // A complete circle drawn using the "arc" command ctx.beginPath(); ctx.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle); ctx.stroke(); }); //结束window.onload </script> </head> <body> <canvas id="canvas" width=200 height=150></canvas> </body> </html>