这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 在网页中画圆的函数 arc 使用方法的相关资料, 需要的朋友可以参考下
一、arc 所需要的参数设置
- arc(x, y, radius, startAngle, endAngle, counterclockwise);
其中 x,y,radius 都很容易理解,那么重点说说 startAngle,endAngle 和 counterclockwise 三个参数!
二、arc 参数详解
1,startAngle 和 endAngle 分别指圆开始的角度和结束的角度,手册上面说的是开始的角度为 0,结束的角度为 Math.PI*2,这样正好画一个圆
2,下面通过实例来讲解 startAngle 和 endAngle(注意 html 的代码我没有写)
- var c = document.getElementById('myCanvas');
- var cxt = c.getContext("2d");
- cxt.fillStyle="#FF0000";
- cxt.arc(70, 30, 25, 0, 1, false);
- cxt.stroke();
我将开始角度设为 0,结束角度设为 1,这样如下图
- var c = document.getElementById('myCanvas');
- var cxt = c.getContext("2d");
- cxt.fillStyle="#FF0000";
- cxt.arc(70, 30, 25, 0, 1, false);
- cxt.stroke();
我将开始角度设为 1,结束角度设为 2,这样如下图
上面我们可以看出第一张图的终点就是第二张图的起点,也就是说一个圆有无数个角度,只要你设置了开始角度和结束角度,它就可以以圆弧的形状将两点连起来!而起点和终点的差值就是图上两点的长度!当起点和终点的差值可以是两点重合时,就形成了圆!知道这一点我们就可以制作动态圆
3,counterclockwise 是指是逆时针 (true) 还是顺时针(false)
大家看,当我将起点设置为 0,终点为 1,选择顺时针时
- var c = document.getElementById('myCanvas');
- var cxt = c.getContext("2d");
- cxt.fillStyle="#FF0000";
- cxt.arc(70, 30, 25, 0, 1, false);
- cxt.stroke();
当我将起点设置为 0,终点为 1,选择逆时针时
- var c = document.getElementById('myCanvas');
- var cxt = c.getContext("2d");
- cxt.fillStyle="#FF0000";
- cxt.arc(70, 30, 25, 0, 1, true);
- cxt.stroke();
以上内容是小编给大家介绍的 JavaScript 在网页中画圆的函数 arc 使用方法,希望大家喜欢。
来源: http://www.phperz.com/article/17/0409/268747.html