|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
要在canvas画布上画圆,需要用到 arc() 方法。arc 一词是弧形、做弧形运动之意,在此引申为画弧。画圆的思路就是画一个闭合的弧,因此必须先弄清 arc() 方法。
context.arc(x,y,r,sAngle,eAngle,[counterclockwise]);
参数多,但容易理解:
x : 圆心的x坐标
y : 圆心的y坐标
r : 园的半径
sAngle : 即 startAngle,园的起始角(弧度单位)
eAngle : 即 endAngle,园的结束角(弧度单位)
counterclockwise : 可选参数(一般用中括号表示),是否是逆时针方向:true(是)/ false(否)
园的起始角一般定义在三点钟方向,也就是水平方向的右端,值设定为0,这是sAngle的值设定;六点钟方向是 0.5π,九点钟方向是 1π,十二点钟方向是 1.5π,结束角或称终止角在三点钟方向(这样才能闭合),那么结束角的值就是 2π了。用JS表示,2π要用到 PI 函数,且要用到 Math 方法,表示为:2*Math.PI。
故此,假如我们以(200,200)为圆心,画一个半径为100的园,不考虑画圆的方向,语法如下:
context.arc(200,200,100,0,2*Math.PI);
举个实例:
<canvas id="cvs" width="400" height="400">你的浏览器不支持画布</canvas>
<script language="javascript">
var cvs = document.getElementById('cvs'); //画布标识
var cct = cvs.getContext('2d'); // 创建2d画笔
cct.strokeStyle = "darkblue"; // 画笔颜色
cct.lineWidth = 8; // 线条粗细
cct.beginPath(); // 开启路径
cct.arc(200,200,100,0,2*Math.PI); // 用 arc 方法设置园
cct.stroke(); // 将上面设定画出来
</script>
如果需要画实心圆,则在已有设定的基础上补充:① 先用 fillStyle 设定填充颜色(不设定默认用黑色):
cct.fillStyle = "tomato"; //定义填充色
② 再用 fill() 方法给圆着上底色:
cct.fill(); // 画(填充)圆
这时,cct.stroke 可以去掉,没有它圆一样画出来。如果不需要边框,可将边框相关的 strokeStyle 和 lineWidth 两句去掉,但一定不可以缺少 arc 方法那句,它是画圆的关键。
|
评分
-
| 参与人数 3 | 威望 +130 |
金钱 +260 |
经验 +130 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
加林森
| + 30 |
+ 60 |
+ 30 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|