[html5]用html5来canvas绘制圆形的实例代码参考

2016-10-13 00:16:48 点击量:8 标签: 收藏本文

canvas绘制圆形的思路：

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

2、创建圆形的路径；

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

4、设定绘制样式。

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

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

<!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(700,400,200,0,Math.PI*2,true); //cuplayer.com提示：Math.PI*2是JS计算方法，是圆 
context.closePath(); 
context.fill(); 
</script> 
</body> 
</html>

上一篇： [html5]HTML5中与html的语法变化和新增加元素说明

下一篇： [html5]一个用html5的canvas写的“转盘”