一个简单的动画：两个点在两个圆上运动。页面中有两个canvas,有一个背景设置为透明。
欢迎访问博主的网站：
http://www.108js.com/link.html
效果图：
<!DOCTYPE html>
<html>
<head>
<title>Making things move</title>
<meta charset="gbk">
<script type="text/javascript">
var canvas,context;
var canvasWidth,canvasHeight;
var playAnimation = true;
var startButton,stopButton;
var canvas1,context1;
var shapes = new Array();
function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
canvasWidth = canvas.width;
canvasHeight = canvas.height;
startButton = document.getElementById("startAnimation");
startButton.disabled="disabled";
stopButton = document.getElementById("stopAnimation");
shapes.push(new Shape(150, 150, 100,5));
shapes.push(new Shape(300, 300, 100,10));
var canvas1 = document.getElementById("myCanvas1");
var context1 = canvas1.getContext("2d");
context1.arc(150,150,100,0,2*Math.PI,true);
context1.stroke();//绘制圆
context1.beginPath();
context1.arc(300,300,100,0,2*Math.PI,true);
context1.strokeStyle="red";
context1.stroke();//绘制圆
startButton.onclick=function() {
this.disabled="disabled";
stopButton.disabled="";
playAnimation = true;
animate();
}
stopButton.onclick=function() {
this.disabled="disabled";
startButton.disabled="";
playAnimation = false;
}
animate();
}
var Shape = function(x, y,radius,angle) {
this.x = x;
this.y = y;
this.radius=radius;
this.angle = angle;
};
function animate() {
context.clearRect(0, 0, canvasWidth, canvasHeight);
var shapesLength = shapes.length;
for (var i = 0; i < shapesLength; i++) {
var tmpShape = shapes[i];
var x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180)));
var y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180)));
if(i==0) tmpShape.angle += 5;
else tmpShape.angle += 10;
if (tmpShape.angle > 360) {
tmpShape.angle = 0;
};
context.fillRect(x, y, 10, 10);
}
if (playAnimation) {
setTimeout(animate, 33);
}
}
</script>
</head>
<body onload="init();">
<canvas id="myCanvas" width="800" height="450" style="background-color: transparent;position:absolute"></canvas>
<canvas id="myCanvas1" width="800" height="450"></canvas>
<div>
<button id="startAnimation">Start</button>
<button id="stopAnimation">Stop</button>
</div>
</body>
</html>
上面的代码没有使用jquery,下面这个使用了jquery
演示效果及源码下载：
http://www.108js.com/article/article3/30068.html
- 大小: 4.4 KB
- 大小: 4.4 KB
分享到：
相关推荐
本知识点主要聚焦于HTML5 Canvas中的圆弧动画，特别是让图形绕着圆周运动的技术实现。在这个示例中，我们将探讨如何创建一个圆弧动画，使一个元素沿着圆形路径循环移动。 首先，我们需要在HTML文件中创建一个`...
本资源“彩色卡通球圆周运动flash动画素材”提供了适用于多媒体项目、教育演示、游戏设计或网站互动元素的高质量素材。Flash作为一种广泛使用的动画创作工具，尤其在网页动画和交互设计中占据着重要地位。下面将详细...
这个“HTML5 Canvas 3D环形方块翻转动画特效源码.zip”压缩包提供了一个使用Canvas实现的3D环形方块翻转动画效果的示例。以下是对这个知识点的详细解释： 1. **HTML5 Canvas基础**： HTML5 Canvas是一个基于矢量...
在HTML5 canvas中，这通常涉及到坐标转换和圆周运动的计算，比如使用`arc()`函数来绘制圆形的行星轨道，`translate()`和`rotate()`函数来改变画布的坐标系统，使得行星可以按照正确的轨道移动。 为了实现行星跟随...
在本项目中，“用javascript模拟太阳系行星的圆周运动.zip”是一个包含HTML、CSS和JavaScript代码的压缩包，用于创建一个交互式的太阳系模型，展示行星围绕太阳的圆周运动。这个小型演示旨在帮助用户理解和应用Web...
2. Canvas绘图：HTML5的Canvas提供了丰富的绘图API，可以用于创建自定义动画。通过在每一帧中计算元素的位置并绘制，可以实现圆周运动。这种方法适合复杂和交互性强的动画效果。 3. CSS3 transform属性：CSS3提供了...
此外，为了创建绕月球旋转的效果，开发者可能使用了数学原理，如向量运算和圆周运动的公式。通过计算物体相对于月球的初始位置和速度，可以模拟出环绕月球的轨迹。同时，可能还会使用`transform`属性进行旋转和平移...
在本文中，我们将深入探讨如何使用HTML5的Canvas API和JavaScript技术来创建一个炫酷的时钟。Canvas是一个强大的绘图工具，它允许我们在网页上动态地绘制图形，而JavaScript则提供了时间处理和动画功能。结合这两个...
在本文中，我们将深入探讨如何使用HTML5的Canvas API创建一个连接粒子分解的动画特效。Canvas是HTML5中一个强大的绘图工具，允许开发者在网页上动态绘制图形，包括复杂的动画效果。 首先，Canvas API提供了二维绘图...
要注意的是，圆周运动的实现并没有使用HTML5的`<canvas>`元素，而是直接通过修改DOM元素的样式属性来达到动画效果。这是一种较为基础的动画实现方式，在不依赖于canvas绘图能力的场景下非常适用。 最后，示例中给出...
3. **数学运算**：粒子的运动轨迹、速度和方向往往需要数学计算来确定，例如，运用三角函数来实现圆周运动，或者用加速度公式来模拟物体的运动状态。 4. **事件监听**：如果需要与用户交互，可以添加鼠标点击、移动...
4. **运动函数**：为了实现物体的运动，我们需要编写计算下一帧位置的函数，比如线性运动、抛物线运动、圆周运动等。这通常涉及到速度、加速度、时间和距离的计算。 5. **事件处理**：JavaScript的事件监听器允许...
12. **旋转动画**：让小球在自身轴线上旋转，或者在平面上做圆周运动。 13. **缩放变换**：根据小球的位置或时间进行大小变化，例如接近屏幕边缘时增大，远离时缩小。 14. **透明度变化**：通过调整小球的透明度，...
在这个时钟特效中，HTML5的`<canvas>`元素可能被用来绘制时钟的背景和指针，因为它允许动态绘图和复杂的图形操作。同时，其他语义化标签如`<header>`、`<section>`等可能用于构建更结构化的网页布局。 5. **时钟...
`analogClock.js` 是一个专为此目的设计的JavaScript库，它无需依赖任何额外的CSS文件，且不基于canvas技术，使得在网页上创建模拟时钟变得既简单又实用。 ### 1. JavaScript基础知识 `analogClock.js` 的实现基础...
3. **图形绘制**：为了创建刻度尺和数字时钟的可视化效果，开发者可能会使用图形库或者框架，如HTML5的Canvas、SVG，或者在Python中的matplotlib、pygame等。这些工具提供了丰富的绘图功能，可以让代码在屏幕上画出...