html弧形列表效果,JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

demo

#canvas {

margin:50px; border:5px solid gray; box-shadow:0px 0px 5px 5px #494949;

}

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var r_x = 250, r_y = 0;

var offset_h = 250;

var offset_w = 500;

var count = 0;

var mode = "up";

var temp = 0;

var getRPoint = function(x, y) {

var r = (Math.pow(x, 2) + Math.pow(y, 2)) / (2 * y);

var point = {

x: x,

y: Math.abs(250 - (r - y)),

r: r

};

return point;

};

function arc(attrs) {

ctx.beginPath();

ctx.arc(attrs.x, attrs.y, attrs.r, attrs.startAngle || 0, attrs.endAngle || Math.PI);

ctx.stroke();

}

var interval = setInterval(function() {

count++;

switch(mode) {

case "up":

temp = count;

ctx.clearRect(0, 0, 500, 500);

if(count%18 == 0) {

mode = "down";

return;

}

break;

case "down":

temp = 36 - count;

ctx.clearRect(0, 0, 500, 500);

if(count%36 == 0) {

mode = "default";

return;

}

break;

case "default":

temp = count - 36;

if(count%54 == 0) {

mode = "up";

count = 0;

return;

}

}

arc(getRPoint(250, 250-8*temp));

}, 100);

更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

希望本文所述对大家JavaScript程序设计有所帮助。