奇妙的螺线 - 阿基米德螺线

前两天在网上无意间看到了一篇介绍在 flash 中画阿基米德螺线的文章, 看完后忽然想到能不能利用 hmtl 5 标准中的 canvas 直接在网页上画阿基米德螺线, 今天花了半天时间在 chrome 中实验成功, 并且得到了意想不到的效果, 下面贴两张图让大家欣赏一下!!

 

核心代码

function drawLuoxian(a, l) { luoxian.ctx.clearRect(0, 0, 600, 600); var points = new Array(360); for (var i = 0; i<360; i+=1) { var point = {x: 0, y: 0}; var arc = (2 * Math.PI) / 360 * i * a; point.x = Math.cos(arc) * (i * l) + origin.x; point.y = Math.sin(arc) * (i * l) + origin.y; points[i] = point; } luoxian.drawLines(points); }

函数中 origin 是坐标系的原点坐标, canvas 的原点在左上角, 图像是的坐标原点在 canvas 的中心

参数 a 是螺线极坐标角度的增量

参数 l 是射线方向的增量

(有不明白的到网上查一下阿基米德螺线的说明, 阿基米德螺线还是很简单的)

 

图形的变化主要是修改 a 的数值带来的.

 

动画部分的代码

 

function luoxianAnimate(currentArc, maxArc) { currentArc += 0.1; $("#lblArc").text("当前角速度: " + currentArc.toFixed(2) + " 度"); drawLuoxian(currentArc, 0.8); if (currentArc < maxArc){ var code = "luoxianAnimate(" + currentArc + "," + maxArc + ");"; window.setTimeout(code ,50); } }

 

currentArc += 0.1; 这个地方可以调整图形转变的节奏, 加的数值越小图形变化的细节看的越清楚, 当然变化的过程也就越漫长. 大家可以下载源代码后自己调整这个地方, 会很有意思的.

 

完整的源代码下载