canvas就像一个画板你画的每个东西都在一个板上没有元素的概念.canvas动画就是不断的重绘来实现的，也就是动画的每一帧都是一幅静态的图片。
其实canvas动画无外乎三个步骤：
1.准备要画的元素及其位置颜色等等....
2.用一个定时器不断改变元素的一些属性如位置
3.再用一个定时器清除画布，画变化中的元素
1.开始准备元素
/**画星星**/
function dragStar(a,b,ctx,r1,r2){
ctx.beginPath();
ctx.fillStyle="#f8b203";
for(var i=0;i<5;i++){
ctx.lineTo(a+r2*Math.cos((18+i*72)*Math.PI/180),b-r2*Math.sin((18+i*72)*Math.PI/180));
ctx.lineTo(a+r1*Math.cos((54+i*72)*Math.PI/180),b-r1*Math.sin((54+i*72)*Math.PI/180));
}
ctx.closePath();
ctx.fill();
};
/**画围绕圆的星星**/
function dragCicle(x,y,R,radio){
var max = 5+radio,angle = 360/max;
for(var j=0;j<max;j++){
var X =x + R*Math.cos(j*angle*Math.PI/180);
var Y =y - R*Math.sin(j*angle*Math.PI/180);
dragStar(X,Y,ctx,10+2*radio,5+1*radio);
}
};
2.绘制动画（因为这里是整个画面的动画所以没有第二步）
(function(){
iNumber++;
ctx.clearRect(0,0,oc.width,oc.height);
ctx.save();
ctx.transform(1,angleX,angleY,1,600,280);
ctx.rotate(iNumber*Math.PI/180);
for(var m=0;m<6;m++){
dragCicle(0,0,20+m*40,m);
}
ctx.restore();
animateCallBack(arguments.callee);
})();
3.交互
oc.onmousemove=function(ev){
var x = ev.clientX - oc.offsetLeft;
var y = ev.clientY - oc.offsetTop;
if(x>600){
angleX=0.5;
}else{
angleX=-0.5;
}
if(y>280){
angleY=0.5;
}else{
angleY=-0.5;
}
};
到这里就完成了整个动画，你可以复制代码看效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动画实现</title>
<style>
body{
background: #fff;
}
#canvas{
background: #fff;
}
</style>
<script>
window.onload=function(){
var oc = document.getElementById("canvas"),
ctx = oc.getContext("2d"),
number = 0,star = [];
var animateCallBack = (window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||
window.msRequestionFrame||
function(callback){return window.setTimeout(callback,100/60);}),iNumber=0,angleX=0,angleY=0;
/**画星星**/
function dragStar(a,b,ctx,r1,r2){
ctx.beginPath();
ctx.fillStyle="#f8b203";
for(var i=0;i<5;i++){
ctx.lineTo(a+r2*Math.cos((18+i*72)*Math.PI/180),b-r2*Math.sin((18+i*72)*Math.PI/180));
ctx.lineTo(a+r1*Math.cos((54+i*72)*Math.PI/180),b-r1*Math.sin((54+i*72)*Math.PI/180));
}
ctx.closePath();
ctx.fill();
};
/**画围绕圆的星星**/
function dragCicle(x,y,R,radio){
var max = 5+radio,angle = 360/max;
for(var j=0;j<max;j++){
var X =x + R*Math.cos(j*angle*Math.PI/180);
var Y =y - R*Math.sin(j*angle*Math.PI/180);
dragStar(X,Y,ctx,10+2*radio,5+1*radio);
}
};
(function(){
iNumber++;
ctx.clearRect(0,0,oc.width,oc.height);
ctx.save();
ctx.transform(1,angleX,angleY,1,600,280);
ctx.rotate(iNumber*Math.PI/180);
for(var m=0;m<6;m++){
dragCicle(0,0,20+m*40,m);
}
ctx.restore();
animateCallBack(arguments.callee);
})();
oc.onmousemove=function(ev){
var x = ev.clientX - oc.offsetLeft;
var y = ev.clientY - oc.offsetTop;
if(x>600){
angleX=0.5;
}else{
angleX=-0.5;
}
if(y>280){
angleY=0.5;
}else{
angleY=-0.5;
}
};
}
</script>
</head>
<body>
<div id="div1">
<canvas id="canvas" width="1360" height="800"></canvas>
</div>
</body>
</html>
相关推荐
今天我从html5tricks网站上整理了8款令人惊叹的HTML5 Canvas动画教程，大家可以一起来看看。 1、3D HTML5 Logo动画 HTML5多视角3D旋转动画 HTML5 3D动画实现起来非常方便，之前介绍过基于jQuery的3D旋转插件是利用多...
JavaScript是Web开发中的重要语言，尤其在创建交互式和动态网页内容方面发挥着...通过学习和实践这些知识点，你可以创建出更复杂的Canvas动画效果，不仅限于太空星球运动，还可以扩展到其他各种动态图形和交互式场景。
本文将深入探讨"人脸扫描Canvas动画"这一主题，这是在web端实现人脸识别过程中的一个重要环节。在H5（HTML5）应用中，利用摄像头捕获用户面部图像并进行处理，能够提供更加直观和互动的用户体验。 首先，我们要理解...
"canvas动画 - 背景线条"是一个利用Canvas实现的创新性设计，它可以为网页提供一种生动且具有视觉吸引力的背景效果。这种线条波动的动画背景，相较于静态的背景图片，能够带给用户更为立体和动态的体验，增加了网页...
HTML5 Canvas 是一种在网页上绘制图形的API，它允许开发者直接在浏览器中进行动态图形渲染，无需依赖任何插件。在这个"HTML5 Canvas ...同时，这个项目也可以作为进一步学习Canvas API、Web动画原理和交互设计的起点。
时空穿梭canvas动画 canvas { display: block; margin: auto; background-color: black; } <canvas id="starfield"></canvas> <script src="canvas.js"> ``` 接着，我们创建一个名为"canvas.js"的...
HTML5的Canvas动画实现通常包括以下步骤： 1. 创建Canvas元素：在HTML中添加`<canvas>`标签，并设置其ID以便于JavaScript访问。 2. 获取2D绘图上下文：通过JavaScript的`document.getElementById('canvas')....
总的来说，"30种鼠标悬停按钮canvas动画特效"是一个展示Canvas强大功能的实例集，对于前端开发者来说，这是一个学习和借鉴的好资源。通过研究这些代码，可以提高自己在Canvas动画设计上的技能，为网页应用创造出更...
在本资源中，我们关注的是一...通过深入学习和实践这些知识点，你将能够理解和重构这个"多彩线束3D缠绕加速效果canvas动画"，甚至创造出自己的Canvas动画效果。记得解压下载的文件，查看源代码以获得更具体的实现细节。
《点和线连接Canvas动画》 在网页设计与开发中，动态效果的运用能极大地提升用户体验，让网页更具吸引力。本资源"点和线连接Canvas动画.zip"提供了一个基于jQuery和CSS特效的实用示例，它利用HTML5的Canvas元素创建...
《彩色卡通闪电Canvas动画特效详解》 在网页设计与开发中，动态效果是提升用户体验、增加视觉吸引力的重要手段。本文将深入探讨一个独特的特效——"彩色卡通闪电Canvas动画特效"，该特效通过JavaScript的jQuery库和...
在这个“html5 canvas动画 人物怪物移动 鼠标点击控制”的实例中，我们将深入探讨如何利用HTML5 Canvas技术和JavaScript实现一个简单的游戏场景，其中人物或怪物能够根据用户的鼠标点击进行移动。 首先，Canvas元素...
8. **动画库和框架**: 为了简化开发，有许多库和框架如GreenSock、CreateJS、Pixi.js等提供了更高级别的动画控制和图形管理，帮助开发者更高效地创建复杂的Canvas动画。 9. **物理模拟**: 有些Canvas动画涉及到物理...
【标题】"像素渐变背景Canvas动画.zip"所涉及的知识点主要集中在JavaScript的Canvas API上，这是一种用于在网页上绘制图形的技术。Canvas是HTML5的一部分，允许开发人员通过JavaScript动态创建和修改图形，包括动画...
在这个“汽车仪表盘canvas动画.zip”压缩包中，包含了一个使用纯JavaScript编写的汽车仪表盘插件，没有依赖jQuery或其他库，这为开发者提供了更轻量级的解决方案。 首先，Canvas的基本用法是通过JavaScript来操作其...
"抽象的彩色能量canvas动画.rar"这个资源就是一个利用JS在Canvas上实现的炫酷动画示例，非常适合开发者学习和实践。Canvas是HTML5的一个重要组成部分，它提供了一种在浏览器中绘制图形的方法，使得网页可以具有丰富...
`canvas`是Web开发中的一个强大工具，它允许开发者动态绘制图形，包括动画效果，为网页添加丰富的视觉体验。 一、canvas基础 HTML5的`canvas`元素是一个矩形区域，可以用于在网页上绘制2D图形。通过JavaScript，...
这个压缩包中的"跟随鼠标晃动带视差特效3D火焰canvas动画"文件包含了完整的源代码，开发者可以下载并研究其中的实现细节，学习如何结合JavaScript、Canvas和视差特效来创建类似的互动动画。 总的来说，这个项目展示...
这个"基于HTML5 Canvas动画实现霓虹雨"的主题涉及到利用Canvas API创建动态、视觉效果丰富的霓虹灯光效果，模拟雨滴下落的过程。在这个项目中，我们将深入探讨如何使用HTML5 Canvas和JavaScript来构建这样的动画。 ...
本案例中的"彩色光线跑出来canvas动画.rar"是一个基于JavaScript的精彩示例，它利用HTML5的Canvas API来实现一个生动有趣的视觉效果。Canvas是HTML5的一个重要元素，允许开发者在网页上绘制图形，创建丰富的动画和...