HTML5之Canvas画圆形
1、设计源码
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>HTML5之Canvas画圆形</title>
</head>
<body onLoad="drawFour('canvas')">
<canvas id="canvas" width="1200" height="560"/>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.fillStyle="#0000ff";
context.beginPath();
context.arc(600,300,200,0,Math.PI*2,true);
context.closePath();
context.fill();
</script>
</body>
2、设计结果
3、分析说明
（1）创建路径
context.beginPath();
（2）创建圆形路径
context.arc(600,300,200,0,Math.PI*2,true);
第一个参数x：起点横坐标
第二个参数y：起点纵坐标
第三个参数radius：圆的半径
第四个参数startAngle：开始角度
第五个参数endAngle：结束角度
第六个参数anticlockwise：是否按照顺时针方向进行绘制
（3）关闭路径
context.closePath();
（4）设定绘制样式
context.fillStyle="#0000ff";
context.fill();
扫一扫
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
