在画完直线和三角形之后，接下来我们要画一段弧和一个圆，先看下效果图：
源代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.arc(300,300,200,0,1.5*Math.PI,false);
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
context.beginPath();
context.arc(750,300,200,0,2*Math.PI,false);
context.stroke();
}
</script>
</body>
</html>
代码详解：
0.为了时js代码更加精简，我们可以把设置画布大小通过canvas标签的属性width和weight来设置
1.context.arc(300,300,200,0,1.5*Math.PI,false)这段代码表示画一段弧，圆心为(300,300),半径为200，弧度从0到1.5PI，false表示顺时针画弧(true为逆时针)
2.context.beginPath()这行代码表示再画完一个图形后在另一个地方重新开始画另一个图形，若不进行该操作，则表示前后画的两个图形是不间断的，具体效果如下图所示：
2663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
