HTML5—Canvas绘制
绘制弧度
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>Canvas 画布</p>
<canvas id="canvas" width="500" height="500"
style="border:1px solid #aaa; display:block; margin: 50px auto">
</canvas>
<!--
在js中获取
-->
<script type="text/javascript">
window.onload = function() {
var mCanvas = document.getElementById("canvas");
var mContext = canvas.getContext("2d");
if(mContext == null){
document.write("当前浏览器无法使用canvas");
}
//使用context绘制
mContext.lineWidth = 5;
mContext.strokeStyle = "red";
mContext.beginPath();
mContext.arc(100, 300, 25, 0, 0.5*Math.PI, true);
mContext.closePath();
mContext.stroke();
mContext.beginPath();
mContext.arc(200, 300, 25, 0, 0.5*Math.PI, false);
mContext.closePath();
mContext.stroke();
Context.beginPath();
mContext.arc(300, 300, 25, 0, 1.5*Math.PI, true);
mContext.closePath();
mContext.stroke();
mContext.beginPath();
mContext.arc(400, 300, 25, 0, 1.5*Math.PI, false);
mContext.closePath();
mContext.stroke();
};
</script>
</body>
</html>
**效果图如下：**
我们发现不管是顺时针还是逆时针 都是按照下面的的坐标弧度不变
第二点： 我们只想绘制一个圆弧， 而不是封闭的图形
将mContext.closePath() 删除， 就不是一个封闭的圆弧
