您的位置：首页 > Web前端 > HTML5

HTML5 canvas 绘制圆形

2015-08-07 16:17 711 查看
canvas绘制圆形的思路：

1、创建路径 XXX.beginpath();

2、创建圆形的路径；

3、关闭路径；XXX.closepath(); 路径不关闭也能绘制出图形

4、设定绘制样式。

创建圆形路径时需要用到对象的arc方法，方法定义如：XXX.arc(x,y,radius,startAngle,endAngle,counterclockwise)

x为圆形起点的横坐标，y为圆形起点的纵坐标，(x,y)为圆心，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，counterclockwise是否按逆时针方向进行绘制。

,值为false表示按顺时针方向计算。
<!DOCTYPE html>
<meta charset="utf-8">
<head>
</head>

<body>
<canvas id="yuanxing" width="1000" height="1000"></canvas>
<script type=text/javascript>
var canvas=document.getElementById("yuanxing");
var context=canvas.getContext("2d");
context.fillStyle="#FF0000";
context.beginPath();
context.arc(200,200,200,0,Math.PI*2,true); //Math.PI*2是JS计算方法，是圆
context.closePath();
context.fill();
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航