程序可以改动一下，看起来会更容易一点。
// 开始创建路径
contextbeginPath();
var dig = MathPI / n 4;
//改：var dig = 2(2MathPI / n) ;
//括号里就是将360度平均分成n份
//为什么前面还要乘以2，见下面（2画这类图形的技巧（或者说规律。））
for(var i = 0; i < n ; i++)
{
var x = Mathsin(i dig);
var y = Mathcos(i dig);
contextlineTo(x size + dx ,y size + dy);
//上面三行改成：
//var x = dx+sizeMathsin(i dig); //（1）
//var y = dy+sizeMathcos(i dig); //（2）
//contextlineTo(x,y);
//（1），（2）其实是圆的参数方程
//把（1），（2）再改，如下：
//var x=dx+sizeMathcos(MathPI/2-idig);//sin变cos
//var y=dy+sizeMathsin(MathPI/2-idig);//cos变sin
}
contextclosePath();
首先至少掌握三点知识。
1这类图形的特点。
2画这类图形的技巧（或者说规律。）
3圆的参数方程。
变量：
n:N角星的顶点数。
dx,dy: N角星的位置，也是N角星中心点的坐标
size: N角星的大小，也是N角星任一顶点到N角星中心点的距离。
angle: 相邻顶点到中心点形成的夹角度
dig: 每一段两点顶点与中心点形成的夹角度
1这类图形的特点。
特点：
（1）所有的顶点都在一个圆上。圆心O为图形的中心点，半径r为中心点到任一顶点的距离,即size。
（2）任意相邻的两个顶点到中心点所形成的角度相等。则angle=2PI/n：
2画这类图形的技巧（或者说规律。）
你给的程序画出来的图形，每画一条线段之间跳过了一个顶点。
举个例子，拿七角星来讲，首先先给七角星的顶点按顺时针编号，即1-7。
你给的程序是这么连的：1-3-5-7-2-6-4-6-1 ,
跟据这点，可得出一个规律：
1-3-5-7-2-6-4-6-1，这个数列，每相邻的两点与中心点形成的角度相等。
即1-3，3-5形成的角度相等，这个角度即是dig=2angle。
3圆的参数方程
方程如下：（x0,y0）为中心点的坐标。即(dx,dy)，a为角度，r为半径即size
x=x0+rcos(a);
y=y0+rsin(a);
举个例，画7角星：
从0度的点开始画：按1-3-5-7-2-6-4-6-1画,
那么，
第1点：x=dx+sizecos(0);y=dy+sizesin(0);
第3点：x=dx+sizecos(0+dig1);y=dy+sizesin(0+dig1);
第5点: x=dx+sizecos(0+dig2);y=dy+sizesin(0+dig2);
表达有限，比较凌乱，哈哈。
根据这个原理，我写出下面的函数，画出来的星形比较“骨感”：
//参数的意思与你给出来的一样。
//注，num不能为偶数，否则画出来的不是星形
function drawStar(pan2d,num,x,y,size)
{
pan2dbeginPath();
var startAngle=-MathPI05;// 起点角度
var dig=MathPI-MathPI/num;//var dig=MathPI-2MathPI/num05;
for(var i=0;i<num;i+=1)
{
var angle=startAngle+digi;
var px=x+sizeMathcos(angle);
var py=y+sizeMathsin(angle);
pan2dlineTo(px,py);
}
pan2dclosePath();
pan2dstroke();
}
三个function，一个允许拖动至此，一个传送数据，一个接收数据，引用传送数据的那个function，div(就是那个框框)引用其他两个，很好理解，为什么这么写不用计较，记住就行
据MDN上显示，该API为非标准API
在火狐上测试可用
https://developermozillaorg/zh-CN/docs/Web/API/Element/setCapture
的确
contexttranslate(圆心x, 圆心y);
接下来就是转圈
你要先设定一个转速时间例如 6000ms
再用自订 function animateRotate() 和 function draw()
animateRotate() {
// 这里写你想要的转圈效果
draw()
}
draw() {
contexttranslate(cx, cy);
contextrotate(MathPI / 180) 当每次转速时间 每角度
}
挺难说明的… 又不知道你画的 rect 是甚麼图形
html5 settimeout具体用法如下：
1、定义和用法
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
2、语法
setTimeout(code,millisec)
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
3、举例说明
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="显示计时的消息框！" onClick = "timedMsg()">
</form>
<p>点击上面的按钮。5 秒后会显示一个消息框。</p>
</body>
</html>
4、运行结果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）