您的位置：首页 > 其它

Canvas中如何绘制弧形和圆形

2011-06-30 07:41 260 查看
在Canvas中绘制弧形和圆形的计算方法：

arc(x,y,radius,startAngle, endAngle,bAntiClockwise)

x,y：是arc的中心点

radius：是半径长度

startAngle：是以starAngle开始（弧度）

endAngle：是以endAngle结束（弧度）

bAntiClockwise：是否是逆时针，设置为true意味着弧形的绘制是逆时针方向的，设置为false意味着顺时针进行

特殊角度数和弧度数对应表

度0°30°45°60°90°120°135°150°180°270°360°
弧度0π/6π/4π/3π/22π/33π/45π/6π3π/22π
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绘制一个小脸</title>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="ImageToolbar" content="no" />
<script type="text/javascript">
function drawRadian(){
var context = document.getElementById('canvas').getContext('2d');
context.beginPath();
context.strokeStyle = "rgb(0,0,0)";
context.arc(100,100,100,0,2*Math.PI,true);
context.closePath();
context.fillStyle = 'rgb(200,0,200)';
context.fill();

context.beginPath();
context.arc(50,75,25,0,2*Math.PI,true);
context.fillStyle = 'rgb(0,0,0)';
context.fill();

context.beginPath();
context.arc(150,75,25,0,2*Math.PI,true);
context.fillStyle = 'rgb(0,0,0)';
context.fill();

context.beginPath();
context.arc(150,75,25,0,2*Math.PI,true);
context.fillStyle = 'rgb(0,0,0)';
context.fill();

context.beginPath();
context.arc(100,125,10,0,2*Math.PI,true);
context.fillStyle = 'rgb(0,0,0)';
context.fill();

context.beginPath();
context.strokeStyle = "rgb(0,0,0)";
context.lineWidth = 5;
context.arc(100,150,25,Math.PI/6,5*Math.PI/6,false);

context.stroke();

}
</script>
</head>
<body onload="drawRadian()">
<canvas id="canvas" width='400' height="300">
your browser doesn't support the HTMl5 elemnt canvas.
</canvas>
</body>
</html>


最终效果：



参考：http://bbs.html5china.com/thread-229-1-1.html

http://www.ibm.com/developerworks/cn/web/1012_linlin_html5canvas/index.html?ca=drs-
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航