JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
#canvas {
margin:50px; border:5px solid gray; box-shadow:0px 0px 5px 5px #494949;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>
<script type="text/javascript">
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);
</script>
</html>
更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
-
圆弧被定义为假想的圆周上任意两点之间的部分。Canvas的API提供了两个绘制圆弧的方法：arc()和arcTo()方法。 arc()方法 使用arc()方法绘制圆弧时，假想的圆由圆心和半径来定义，两个点由起始角度和结束角度来定义，还需要一个参数来定义绘制方向。故，arc()方法的格式为： arc(x, y, radius, startAngle, endAngle [, anticlockwi
-
使用HTML5画布时，有时候需要绘制完美的圆弧。如果你对绘制彩虹、笑脸、图表等感兴趣，本节将是你努力的起点。 图1-3 绘制圆弧 绘制步骤 按照以下步骤绘制一条圆弧： 1. 定义2D画布并设置圆弧样式： window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context
-
高级路径 今天开始，我们就要征战路径最后也是最难的部分了——高级路径。之前我们学习的都是绘制线条（基本路径），接下来的四节课我们详细看看绘制曲线（高级路径）的有关方法。 剧透一下，主要有四个方法： 标准圆弧：arc() 复杂圆弧：arcTo() 二次贝塞尔曲线：quadraticCurveTo() 三次贝塞尔曲线：bezierCurveTo() 在开始之前，我们优化一下我们的作图环境。灵感来自于上
-
本文向大家介绍android实现简单圆弧效果，包括了android实现简单圆弧效果的使用技巧和注意事项，需要的朋友参考一下 最近项目完成就开始搞一些有用没用的东西，以前面试的时候有人问我那种圆弧效果怎么做，还问我翻牌效果，我只看过，没有做过，现在有空了，而且想到可能会用到就做个简单的 圆弧很简单，自定义个View,创建个Paint，设置 arcPaint.setStyle(Paint.Style.
-
本文向大家介绍JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例，包括了JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： 更多关于js特效相关内容
-
本文向大家介绍JavaScript+html5 canvas制作的圆中圆效果实例，包括了JavaScript+html5 canvas制作的圆中圆效果实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： 更多关于js特效相关内容感兴趣的读者可查看本站专题：《j