JavaScript动画实例：旋转的圆球

合集下载

JS关键字球状旋转效果的实例代码

JS关键字球状旋转效果的实例代码有时上⽹查资料，看到别⼈的博客上有关键字旋转的效果，觉得蛮不错的。

于是⽹上搜索了⼀下它的实现，好吧，⾃⼰动⼿写写。

HTML:复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><link rel="stylesheet" href="css/style.css" /><script type="text/javascript" src="js/lrtk.js"></script></head><body><div id="div1"><a > webform</a><a > mvc</a><a >EF</a><a >Castle</a><a ></a><a >NHibernate</a><a >WCF</a><a >WPF</a><a >AOP</a><a >IoC</a><a >SQL</a><a >Javascript</a><a >Jquery</a><a >KendoUI</a></div></body></html>CSS:复制代码代码如下:#div1{height:400px;width:450px; position:relative; margin:10px auto;}#div1 a{position:absolute;top:0px;left:0px;font-weight:bold;padding:3px 6px; color:black; text-decoration: none;}#div1 a:hover{border:1px solid #eee;background:#ccc;border-radius:5px;}既然是关键字，我觉得给他们加上不同的颜⾊才够酷。

JavaScript动画实例：圆点圈旋转

JavaScript动画实例：圆点圈旋转1．一条圆点曲线按照给定的曲线方程，计算出曲线上P个点的坐标，在每个计算出的坐标点处，以该坐标点为圆心，以r为半径绘制一个实心小圆。

这p个实心小圆点可以构成一条曲线。

例如，正弦曲线的坐标方程为：Y=A*SIN(X) （A为振幅）编写如下的HTML代码。

<!DOCTYPE html><html><head><title>一条圆点曲线</title></head><body><canvas id="myCanvas" width="600" height="600" style="border:3px double;"></canvas><script>var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var w=canvas.width;var h=canvas.height;const p = 32;ctx.save();ctx.translate(w/2, h/2);ctx.fillStyle = "#f0f";for (var k = 0; k < p; k++){var alfa =(2*Math.PI/p)*k;var x0 = 8*k;var y0 = 30*Math.sin(alfa);ctx.beginPath();ctx.arc(x0, y0, 3, 0, 2*Math.PI);ctx.fill();}ctx.restore();</script></body></html>在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中绘制出如图1所示的一条由32个圆点构成的正弦曲线。

原生js实现弹动小球效果

原⽣js实现弹动⼩球效果本⽂实例为⼤家分享了JavaScript实现弹动⼩球效果展⽰的具体代码，供⼤家参考，具体内容如下源码展⽰<!doctype html><html><head><meta charset="utf-8"><title>弹弹球（原⽣js）</title><style>* {margin:0;padding:0;font-family:Microsoft YaHei,serif;}li {list-style:none;}.ball {position:absolute;top:0;left:0;width:100px;height:100px;background:pink;border-radius:50%;}</style></head><body><div></div><script>play(10);function play(num) {//⽣成num个divfor (var i = 0; i < num; i++) {var Div = document.createElement("div");Div.className = "ball";Div.leftVal = 3 + i; //预存每个球的初始速度Div.topVal = 3 + i; //预存每个球的初始速度Div.style.backgroundColor = randomC();document.body.appendChild(Div);}var aBall = document.querySelectorAll(".ball");maxTop = document.documentElement.clientHeight - aBall[0].clientHeight, //获取top的最⼤值maxLeft = document.documentElement.clientWidth - aBall[0].clientWidth; //获取left的最⼤值window.onresize = function() {maxTop = document.documentElement.clientHeight - aBall[0].clientHeight; //获取top的最⼤值maxLeft = document.documentElement.clientWidth - aBall[0].clientWidth; //};auto();function auto() {for (var i = 0; i < num; i++) {var Ball = aBall[i],startL = Ball.offsetLeft, //取每个球的初始left和TOP值startT = Ball.offsetTop, //取每个球的初始left和TOP值Left = startL + Ball.leftVal, //改变，每个球的left和top值Top = startT + Ball.topVal; //改变，每个球的left和top值if (Left >= maxLeft || Left <= 0) {Left = Math.min(Left, maxLeft); //限制Left的最⼤值Left = Math.max(Left, 0); //限制最⼩值Ball.leftVal = -Ball.leftVal;Ball.style.backgroundColor = randomC();}if (Top >= maxTop || Top <= 0) {Ball.topVal = -Ball.topVal;Top = Math.min(Top, maxTop); //限制Left的最⼤值Top = Math.max(Top, 0); //限制最⼩值Ball.style.backgroundColor = randomC();}Ball.style.top = Top + "px";Ball.style.left = Left + "px";}requestAnimationFrame(auto)}// rgb(0-255)function randomC() {var r = Math.floor(Math.random() * 256),g = Math.floor(Math.random() * 256),b = Math.floor(Math.random() * 256);return "rgb(" + r + "," + g + "," + b + ")";}}</script></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JavaScriptcanvas实现围绕旋转动画

JavaScriptcanvas实现围绕旋转动画使⽤canvas的convas来实现围绕旋转动画，外圈顺时针，⾥层逆时针代码demo链接地址：html⽂件<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>body {margin: 0;padding: 0;overflow: hidden;background-color: #f0f0f0;}</style><script src="js/konva.js"></script><script src="js/circle.js"></script></head><body><div id="cas"></div><script>var width = window.innerWidth;var height = window.innerHeight;//创建舞台var stage = new Konva.Stage({container: "cas",width: width,height: height});//创建层var layer = new yer();//创建组1var group = new Konva.Group({x: stage.width() / 2,y: stage.height() / 2,});//最外层圆var circle1 = new Konva.Circle({x: 0,y: 0,radius: 250,stroke: "#ccc",strokeWidth: 1,dash: [6, 3]});group.add(circle1);//第⼆个圆var circle2 = new Konva.Circle({x: 0,y: 0,radius: 150,stroke: "#ccc",strokeWidth: 1,dash: [6, 3]});group.add(circle2);//第三个圆var circle3 = new Konva.Circle({x: 0,y: 0,radius: 135,stroke: "blue",strokeWidth: 2,dash: [10, 5]});group.add(circle3);//第四个圆var circle4 = new Konva.Circle({x: 0,y: 0,radius: 105,fill: "#ccc",opacity: 0.4});group.add(circle4);//第五个圆var circle5 = new Konva.Circle({x: 0,y: 0,radius: 80,fill: "#74A2F0"});group.add(circle5);//添加⽂字var text = new Konva.Text({x: -80,y: -12,text: "WEB全栈",fill: "white",fontSize: 24,width: 160,align: "center"});group.add(text);layer.add(group);//*****************************************************//创建组2var outGroup = new Konva.Group({x: stage.width() / 2,y: stage.height() / 2,});var arrColor = ["red", "green", "blue", "orange", "purple"]; var arrText = ["web", "node.js", "ajax", "html5", "css"];for(var i = 0; i < 5; i++) {var cir = new Circle({x : 250 * Math.cos(72 * i * Math.PI / 180), //圆⼼x轴的坐标 y : 250 * Math.sin(72 * i * Math.PI / 180), //圆⼼y轴的坐标 outR : 60, //外圆的半径inR : 50, //内圆的半径fill : arrColor[i], //填充颜⾊text: arrText[i], //⽂字outOpacity : 0.3, //外圆的透明度inOpacity : 0.6 //内圆的透明度});cir.drawCircle(outGroup);}layer.add(outGroup);//***********************************************//创建组3var inGroup = new Konva.Group({x: stage.width() / 2,y: stage.height() / 2,});var arrColor = ["red", "green", "blue", "orange", "purple"]; var arrText = ["web", "node.js", "ajax", "html5", "css"];for(var i = 0; i < 5; i++) {var cir = new Circle({x : 135 * Math.cos(90 * i * Math.PI / 180), //圆⼼x轴的坐标 y : 135 * Math.sin(90 * i * Math.PI / 180), //圆⼼y轴的坐标 outR : 45, //外圆的半径inR : 35, //内圆的半径fill : arrColor[i], //填充颜⾊text: arrText[i], //⽂字outOpacity : 0.3, //外圆的透明度inOpacity : 0.6 //内圆的透明度});cir.drawCircle(inGroup);}layer.add(inGroup);//************************************************//运动动画var step = 1; //转动的⾓度var anim = new Konva.Animation(function() {outGroup.rotate(step);outGroup.getChildren().each(function (ele, index) { ele.rotate(-step);});inGroup.rotate(-step);inGroup.getChildren().each(function (ele, index) { ele.rotate(step);});}, layer);anim.start();stage.add(layer);stage.on("mouseover", function () {step = 0.3;});stage.on("mouseout", function () {step = 1;});</script></body></html>js⽂件function Circle(obj) {this._init(obj);}Circle.prototype = {_init: function (obj) {this.x = obj.x, //圆⼼x轴的坐标this.y = obj.y, //圆⼼y轴的坐标this.outR = obj.outR, //外圆的半径this.inR = obj.inR, //内圆的半径this.color = obj.fill, //填充颜⾊this.text = obj.text, //内圆的⽂字this.outOpacity = obj.outOpacity, //外圆的透明度 this.inOpacity = obj.inOpacity //内圆的透明度 },drawCircle: function (group) {//创建⼀个组var groupCir = new Konva.Group({x: this.x,y: this.y});//外圆var outCir = new Konva.Circle({x: 0,y: 0,radius: this.outR,fill: this.color,opacity: this.outOpacity});groupCir.add(outCir);//内圆var inCir = new Konva.Circle({x: 0,y: 0,radius: this.inR,fill: this.color,opacity: this.inOpacity});groupCir.add(inCir);//添加⽂字var text = new Konva.Text({x: -this.inR,y: -10,text: this.text,fill: "white",fontSize: 20,width: 2 * this.inR,align: "center"});groupCir.add(text);group.add(groupCir);}}效果图⽚：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JavaScript实例：运动的小球

JavaScript实例：运动的小球本篇博文通过制作一个小球运动动画的实例，来学习在HTML5的画布上实现动画制作的方法，同时理解面向对象程序设计的基本思想。

1．绘制小球先在HTML页面中设置一个画布。

<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;"> </canvas>再将小球画在canvas（画布）上面。

可编写如下的HTML代码。

<!DOCTYPE html><head><title>运动的小球（一）</title></head><body><canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;"> </canvas><script type="text/javascript">var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');var x=100, y=100,radius=25;context.beginPath();context.arc(x, y, radius, 0, Math.PI*2, true);context.closePath();context.fillStyle = "blue";context.fill();</script></body></html>其中，变量x、y、radius分别是小球的圆心坐标（x，y）和半径radius。

JavaScript动画实例：圆点的衍生

JavaScript动画实例：圆点的衍生考虑如下的曲线方程：R=S*sqrt(n)α=n*θX=R*SIN(α)Y=R*COS(α)其中，S和θ可指定某一个定值。

对n循环取0~999共1000个值，对于每个n，按照给定的坐标方程，求得一个坐标值(x,y)，然后以（x,y）为圆心绘制一个半径为6的圆，可以得到一个螺旋状的图形。

编写如下的HTML代码。

<html><head><title>衍生的圆点</title></head><body><canvas id="myCanvas" width="600" height="600" style="border:3px double #996633;"> </canvas><script>var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var scale = 10;var theta = 30;for (n=0;n<1000;n++){var radius = scale * Math.sqrt(n);var angle = n * theta * (Math.PI / 180);var x = radius * Math.cos(angle) + canvas.width / 2;var y = radius * Math.sin(angle) + canvas.height / 2;ctx.beginPath();ctx.arc(x, y, 6, 0, Math.PI * 2);ctx.fillStyle ='rgba(255,50,50,0.9)';ctx.fill();}</script></body></html>在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出如图1所示的图案。

javascript模拟地球旋转效果代码实例

javascript模拟地球旋转效果代码实例复制代码代码如下:<!DOCTYPE html><html><head><title>JS模拟地球旋转-柯乐义</title></head><body><div><h2>JS模拟地球旋转·柯乐义</h2></div><div id="keleyi_com" style="width:300px;height:300px;"></div><script type="text/javascript">eval(z = 'p="<"+"pre>"/* ,.oq#+ ,._, */;for(y in n="zw24l6k\4e3t4jnt4qj24xh2 x/* =<,m#F^ A W###q. */42kty24wrt413n243n\9h243pdxt41csb yz/* #K q##H######Am */43iyb6k43pk7243nm\r24".split(4)){/* dP cpq#q##########b, */for(a in t=pars\eInt(n[y],36)+/* p##@###YG=[#######y */(e=x=r=[]))for\(r=!r,i=0;t[a/* d#qg `*PWo##q#######D */]>i;i+=.05)wi\th(Math)x-= /* Q###KWR#### W[ */.05,0>cos(o=\new Date/1e3/* .Q#########Md#.###OP A@ , */+x/PI)&&(e[~\~(32*sin(o)*/* , (W#####Xx######.P^ T % */sin(.5+y/7))\+60] =-~ r);/* #y `^TqW####P###BP */for(x=0;122>\x;)p+=" *#"/* b. OQ####x#K */[e[x++]+e[x++\]]||(S=("eval"/* l `X#####D , */+"(z=\'"+z.spl\it(B = "\\\\")./* G####B" # */join(B+B).split\(Q="\'").join(B+Q/* VQBP` */)+Q+")//m1k")[x/2\+61*y-1]).fontcolor/* TP */(/\\w/.test(S)&&"#\03B");document.getElementById("keleyi_com").innerHTML=p+=B+"\\n"}setTimeout(z)')//</script></body></html>。

JavaScript+html5canvas制作的圆中圆效果实例

JavaScript+html5canvas制作的圆中圆效果实例本⽂实例讲述了JavaScript+html5 canvas制作的圆中圆效果。

分享给⼤家供⼤家参考，具体如下：运⾏效果截图如下：具体代码如下：<!DOCTYPE html><html><head><title>demo</title><style type="text/css">#canvas {background:#F2F2F2; height:500px; height:500px; margin-top:100px; margin-left:200px;}</style></head><body><canvas id="canvas" width="500px" height="500px" ></canvas></body><script type="text/javascript">(function() {var dyl = {};dyl.getDom = function(id) {return document.getElementById(id);}dyl.getContext = function(canvasID) {var canvas = this.getDom(canvasID);if(!canvas) {return null;}return canvas.getContext("2d");}if(!window.dyl) {window.dyl = dyl;}})();cache = {};cache.context = dyl.getContext('canvas');// 每个圈的圆个数控制cache.scaleNmb = 6;cache.createColor = function() {var color = "rgb(";color += Math.round(Math.random()*255);color += ",";color += Math.round(Math.random()*255);color += ",";color += Math.round(Math.random()*255);color += ")";return color;};cache.draw = function() {cache.context.fillRect(-10, -10, 20, 20);for(var i=1; i<10; i++) {cache.context.save();for(var j=0; j<cache.scaleNmb*i; j++) {cache.context.rotate(Math.PI*2/(cache.scaleNmb*i));cache.context.fillStyle = cache.createColor();cache.context.beginPath();cache.context.arc(0, 20*i, 5, 0,Math.PI*2, true);cache.context.closePath();cache.context.fill();}cache.context.restore();}};cache.init = function() {cache.context.translate(250, 250);cache.draw();};cache.init();</script></html>更多关于js特效相关内容感兴趣的读者可查看本站专题：《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

JavaScript图片旋转效果实现方法详解

JavaScript图⽚旋转效果实现⽅法详解在Canvas API中，上下⽂CanvasRenderingContext2D对象提供了⼀个与坐标旋转相关的⽅法：void rotate(in float angle); // 按给定的弧度顺时针旋转anglerotate（）⽅法旋转的中⼼始终是canvas的原点。

如果要改变旋转中⼼，需要使⽤translate⽅法。

我们可以将绘制的图形每隔⼀定的时间间隔后，旋转⼀定的⾓度重新绘制⼀次，这样就可以得到旋转的动画效果。

1．旋转的扇叶将⼀个梯形按顺时针旋转90°的⽅式绘制4次，可以绘制出⼀个扇叶图案。

将绘制的扇叶图案每隔0.1秒后顺时针旋转12°，重新绘制⼀遍，得到旋转的扇叶动画。

编写如下的HTML代码。

<!DOCTYPE html><head><title>旋转的扇叶</title><script type="text/javascript">var context;var i;function draw(id){var canvas = document.getElementById(id);if (canvas == null)return false;context = canvas.getContext('2d');i = 3;setInterval(move, 100);}function move(){context.clearRect(0, 0, 400, 300);context.save();context.fillStyle = 'green';context.translate(100, 100);context.rotate(i * Math.PI / 45)drawLeaf();i += 3;if (i >= 90) i = 3;context.restore();}function drawLeaf() // 绘制扇叶{context.save();for (var j = 0; j < 4; j++){context.rotate(Math.PI / 2);context.beginPath();context.moveTo(-20, -80);context.lineTo(0, -80);context.lineTo(0, 0);context.lineTo(-30, 0);context.closePath();context.fill();}context.restore();}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="200" height="200"style="border:3px double #996633;"></canvas></body></html>将上述HTML代码保存到⼀个html⽂本⽂件中，再在浏览器中打开包含这段HTML代码的html⽂件，可以在浏览器窗⼝中看到扇叶的旋转动画，如图1所⽰。

css3动画案例

css3动画案例
以下是一个简单的CSS3动画案例，可以用来制作一个旋转的球体：
HTML代码：
<div class="sphere"></div>
CSS代码：
.sphere {
width: 200px;
height: 200px;
background-image: url('sphere.png');
border-radius: 50%;
animation: rotate 5s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
在这个例子中，我们使用了一个名为.sphere 的div 元素来代
表球体。

在CSS 中，我们设置了球体的宽度和高度，并使用背景图像来呈现球体的外观。

我们还使用border-radius 属性将div 元素设置为圆形，以模拟球体的形状。

接下来，我们定义了一个名为rotate 的动画，使用@keyframes 规则来指定动画的起始和结束状态。

在这个动画中，我们使用transform 属性来控制球体的旋转。

通过将球体从0 度旋转到360 度，我们可以实现球体的连续旋转效果。

最后，我们将动画应用到.sphere 元素上，并指定动画的持续时间、循环次数和运动函数。

js实现4个方向滚动的球

js实现4个⽅向滚动的球效果图：代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}#wrap{width: 800px;height: 500px;border: 1px solid deeppink;margin-left: 10px;margin-top: 5px;float: left;}#input1{width: 80px;margin: 5px auto 5px 10px;font-size: 0;float: left;}#div1{width: 100px;height: 100px;background: hotpink;position: absolute;top: 20px;left: 30px;border-radius: 100px;box-shadow: 0px 5px 5px rgba(0,0,0,.5);}input{width: 100px;height: 40px;line-height: 40px;text-align: center;font-size: 18px;display: block;background: palegreen;margin-bottom: 5px;}</style></head><body><div id="wrap"><div id="div1"></div></div><div id="input1"><input type="button" value="向左" id="btn2" /><input type="button" value="向右" id="btn1"/><input type="button" value="向上" id="btn3" /><input type="button" value="向下" id="btn4"/></div><script>var oBtn=document.getElementById('btn1');var oDiv=document.getElementById('div1');var oBtn2=document.getElementById('btn2');var oBtn3=document.getElementById('btn3');var oBtn4=document.getElementById('btn4');oBtn4.onclick=function(){move(oDiv,10,380,'0px 5px 5px rgba(0,0,0,.5)','top');}oBtn3.onclick=function(){move(oDiv,-10,30,'0px -5px 5px rgba(0,0,0,.5)','top');}oBtn2.onclick=function(){move(oDiv,-10,40,'-5px 5px 5px rgba(0,0,0,.5)','left');}oBtn.onclick=function(){move(oDiv,10,680,'5px 5px 5px rgba(0,0,0,.5)','left');}function move(obj,val,target,bs,dir){obj.style.boxShadow=bs;clearInterval(obj.timer);obj.timer=setInterval(function(){var speed=parseInt(getStyle(obj,dir))+val;if(speed>=target&&val>0){speed=target;}if(speed<=target&&val<0){speed=target}obj.style[dir]=speed+'px';if(speed==target){clearInterval(obj.timer);}},30);}function getStyle(obj,sty){return obj.currentStyle?obj.currentStyle[sty]:getComputedStyle(obj)[sty];}</script></body></html>以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！。

threejs 圆环旋转角度计算

threejs 圆环旋转角度计算摘要：1.Three.js 简介2.圆环旋转角度的计算方法3.圆环旋转的实现代码正文：【1.Three.js 简介】Three.js 是一个基于WebGL 的JavaScript 3D 库，它可以让Web 浏览器实现3D 效果。

Three.js 提供了丰富的3D 图形功能，如灯光、阴影、动画等，使得Web 开发者可以轻松地创建高质量的3D 应用。

【2.圆环旋转角度的计算方法】在Three.js 中，圆环旋转角度的计算方法可以通过以下公式得到：旋转角度= (旋转轴角度/ 360) * 圆环的半径其中，旋转轴角度表示旋转轴从0 到360 度的角度，圆环的半径表示圆环的半径值。

【3.圆环旋转的实现代码】下面是一个使用Three.js 实现圆环旋转的示例代码：```javascript// 创建场景var scene = new THREE.Scene();// 创建相机var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器var renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 创建圆环几何体var geometry = new THREE.RingGeometry(1, 2);// 创建圆环材质var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// 创建圆环网格var ring = new THREE.Mesh(geometry, material);scene.add(ring);// 设置相机位置camera.position.z = 5;// 渲染循环function animate() {requestAnimationFrame(animate);// 计算旋转角度var rotationAngle = (rotationAxisAngle / 360) * ring.radius;// 更新圆环旋转ring.rotation.y = rotationAngle;renderer.render(scene, camera);}animate();```在这个示例代码中，我们首先创建了一个Three.js 场景，然后创建了一个圆环几何体和材质。

JS完成画圆圈的小球

JS完成画圆圈的⼩球效果图图（1）图（2）代码如下：<html><head><title>JS动画之转动的⼩球</title><style type="text/css">div{width:20px;height:20px;background-color:black;position:absolute;border:1px solid red;border-radius:50%;}</style></head><body><div id="box"></div><script type="text/javascript">var box=document.getElementById('box');box.style.left="600";box.style.top="300px";var n=0; //正弦函数的横坐标，理解为时间轴好⼀点。

function rotation(){box.style.left=(600-Math.sin(1/180)*80)+Math.sin(n/180)*80+"px"; //300是⼩球的没开始运动的初始位置，n表⽰时间轴，后边是除数是为了将时间细分，使运动更平滑，80表⽰半径。

box.style.top=(300-Math.cos(1/180)*80)+Math.cos(n/180)*80+"px"; //第⼀个括号中的内容是为了让⼩球在开始运动时处于初始位置（300,300）var dr = document.createElement('div');dr.style.left=(600-Math.sin(1/180)*80)+Math.sin(n/180)*80+"px";dr.style.top=(300-Math.cos(1/180)*80)+Math.cos(n/180)*80+"px";document.body.appendChild(dr);n++;if(n>180*2*Math.PI)return false; // 0 到 2π为⼀个转动周期，如果要半圆，只需将n的取值范围减半，如需反⽅向转动，调换left和top的值即可。

JavaScript动画实例：圆圈的行进

JavaScript动画实例：圆圈的行进1．一个圆圈的行进一个半径为size的圆圈以画布的中心（canvas.width/2,canvas.height/2）为起点，在水平方向（angle=180°）上以速度speed往复运动，会呈现怎样的效果呢？编写如下的HTML代码。

<!DOCTYPE html><html><head><title>圆圈的行进</title></head><body><script>var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');document.body.appendChild(canvas);canvas.width = window.innerWidth;canvas.height = window.innerHeight;ctx.beginPath();ctx.fillStyle = 'rgba(0, 0, 0, 1)';ctx.fillRect(0, 0, canvas.width, canvas.height);var angle =180;var pos = [canvas.width/2,canvas.height/2];var size = 15;var speed = 5;var tick = 0;var hue = 0;function draw (){var radians = angle*Math.PI/180;pos[0] += Math.cos(radians)* speed * Math.cos(tick/50),pos[1] += Math.sin(radians)* speed * Math.cos(tick/50);hue=(hue+1)%360;tick++;ctx.strokeStyle = 'hsl('+hue+', 80%, 65%)';ctx.beginPath();ctx.arc(pos[0],pos[1],size,0,2*Math.PI);ctx.stroke();fade();window.requestAnimationFrame(draw);}function fade (){ctx.beginPath();ctx.fillStyle = 'rgba(0, 0, 0, .03)';ctx.fillRect(0, 0, canvas.width, canvas.height);}window.requestAnimationFrame(draw);</script></body></html>在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中呈现出如图1所示的动画效果。

JavaScript动画实例：动感小球

JavaScript动画实例：动感小球已知圆的坐标方程为：X=R*SIN(θ)Y=R*COS(θ) （0≤θ≤2π）将0~2π区间等分48段，即设定间隔dig的值为π/24。

θ初始值从0开始，按曲线方程求得坐标值(x,y)，并在当前坐标处绘制一个半径为r（相比R，r小得多）实心圆。

之后每隔0.05秒，清除画布，将θ的初始值加π/24后，按曲线方程求得新坐标值(x,y)，并在求得的新坐标处再绘制一个半径为r的实心圆，这样，可以得到半径为r的圆绕半径为R的圆形轨道动态旋转的动画效果。

旋转一周后（即θ的值为2π），令θ重新从初值0开始继续动画过程。

编写如下的HTML代码。

<!DOCTYPE html><html><head><title>绕圆周旋转的小球</title></head><body><canvas id="myCanvas" width="500" height="400" style="border:3px double #996633;"> </canvas><script type="text/javascript">var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var i=0;setInterval(move,50);function move(){ctx.clearRect(0,0,canvas.width,canvas.height);var dig=Math.PI/24;x0=250;y0=200;ctx.strokeStyle="green";ctx.beginPath();ctx.arc(x0,y0,100,0,Math.PI*2,true);ctx.closePath();ctx.stroke();ctx.beginPath();var x=100*Math.sin(i*dig)+x0;var y=100*Math.cos(i*dig)+y0;ctx.arc(x,y,5,0,Math.PI*2,true);ctx.closePath();ctx.fillStyle = "red";ctx.fill();i=i+1;if (i>=48) i=0;}</script></body></html>在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图1所示绕圆周旋转的小球。

面向对象原生JavaScript案例炫彩小球

⾯向对象原⽣JavaScript案例炫彩⼩球⾯向对象其实对于初学者来说还是⽐较难以理解的，以前看到⼀个⾯试题⽬⾯向对象是什么？⾯向对象是⼀种思想，千万别⼊坑了；这次给⼤家带来的是⼀个⿏标移动产⽣⼩球的案例，不是我不想给⼤家分享如何去认识⾯向对象，因为我觉得，做案例⽐什么画图理解，或者是字⾯意思更好理解⼀点；那么来吧宝贝；先上点简单的CSS<style type="text/css">*{margin: 0;padding: 0;}body{background: #000;}</style>再来HTML<div id="box"><div class="ball"></div></div>最后重头戏来了JavaScript<script>//构造⼀个函数function Ball(x,y,r){//x,y,r等待传参this.x = x;this.y = y;this.r = r;//透明度this.opacity=0.5;//随机⽣成散发的位置，如果等于零，则再次循环随机do{this.dx = parseInt(Math.random()*10)-5;this.dy = parseInt(Math.random()*10)-5;}while(this.dx ==0 && this.dy ==0)//颜⾊放⼊数组var colors = ["#996","#c1c","#c63","#85a","#19c","#6cc","#96c",'#f90', '#ff0', '#09c', '#c06', '#f99', '#9c3','#6cc', '#9cc'];//随机获取颜⾊数组的下标this.color = colors[parseInt(Math.random()*colors.length)];//初始化this.init();//把当前这个⼩球放⼊下⾯的数组⾥⾯BallArr.push(this);}//初始化样式,上树Ball.prototype.init = function(){//⽣成div放⼊this.dom中this.dom = document.createElement("div");//在#box中插⼊这个(this.dom)⾥⾯document.getElementById("box").appendChild(this.dom); //当然⼤家也可以不⽤把样式也在这⾥⾯可以放到css⾥⾯然后加⼀个className//⼩球样式//⼩球定位this.dom.style.position = "absolute";//left值等于x轴减去半径this.dom.style.left = this.x - this.r +"px";//top值等于y轴减去半径this.dom.style.top = this.y - this.r +"px";//width等于半径*2this.dom.style.width = this.r*2 +"px";//height等于半径*2this.dom.style.height = this.r*2 +"px";//backgroundColor等于上⾯颜⾊的随机数组this.dom.style.backgroundColor = this.color;//div⽅体变圆形this.dom.style.borderRadius = "50%";//拿到透明度this.dom.style.opacity = this.opacity;}//更新移动Ball.prototype.update = function(){//移动的位置等于x,y加上⾃⼰this.x += this.dx;this.y += this.dy;//更新的时候半径慢慢变⼩this.r--;//如果0⼤于等于更新的半径则执⾏goDiu()移除;if(this.r <=0){this.goDiu()}//只更新半径是没⽤的,所以我们也要把上⾯的样式也整体更新⼀下,不然⼩球很⽣硬this.dom.style.left = this.x - this.r +"px";this.dom.style.top = this.y - this.r +"px";this.dom.style.width = this.r * 2 +"px";this.dom.style.height = this.r * 2 +"px";}//移除⼩球Ball.prototype.goDiu = function(){//找到⽗元素(#box)才能删掉⼦元素(this.dom)document.getElementById("box").removeChild(this.dom);//for循环进⾏删除,反过来循环才不会影响数组的位置和判断for(var i = BallArr.length-1; i>=0; i--){//如果BallArr下标等于当前的数组的下标if(BallArr[i]=== this){//删除BallArr的⼀项BallArr.splice(i,1);}}}// console.log(this.x);// 每次new⼀个Ball就放到这个数组⾥⾯var BallArr = [];//创建⼀个定时器,每20毫秒更新⼀次setInterval(function(){//循环BallArr的下标来更新for(var i = 0;i<BallArr.length;i++){BallArr[i].update();}},20)//添加⿏标移动DOM操作document.onmousemove = function(e){//获取⿏标移动的x轴位置var x = e.clientX;//获取⿏标移动的y轴位置var y = e.clientY;//传参x,y,半径;new Ball(x,y,30);}</script>这个案例基本上每⼀步，我都分析出来了，应该是⽐较好理解的；⾃⼰也写了⼀遍；等下我上传到服务器上⾯给⼤家发个演⽰吧还是⼀样的如果本⽂有上⾯技术问题，或者措辞问题⼤家可以在⾯留⾔。

javascript实现小球的自由移动代码

javascript实现小球的自由移动代码javascript实现小球的自由移动代码用javascript实现小球的自由移动是不是很神奇啊?下面店铺交给大家实现的方法，欢迎阅读以下代码，更多详情请关注店铺。

代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>javascript实现小球的自由移动</title> <link rel="stylesheet" type="text/css" href=""><meta http-equiv="content-type" content="text/html;charset=utf-8"><script type="text/javascript">//定义全局变量//小球坐标ballX=0;ballY=0;//小球在x,y轴移动的.方向directX=1;directY=1;//小球移动function ballMove(){//小球移动ballX+=2*directX;ballY+=2*directY;//同时修改小球的top 和widthp2.style.top=ballY+'px';p2.style.left=ballX+'px';//window.alert(p1.offsetWidth);//offsetwidth在JS中是获取元素的宽,对应的还有offsetHeight //判断转向//learInterval(i);if(ballX+p2.offsetWidth>=p1.offsetWidth || ballX<=0){directX=-directX;}if(ballY+p2.offsetHeight>=p1.offsetHeight || ballY<=0){directY=-directY;}}//定时器var i=setInterval("ballMove()",10);</script></head><body><p id="p1" style="width:400px;height:300px;border:1px solid silver;POSITION: absolute; TOP: 100px"><p id="p2" style="position:absolute;left:0px;top:0px;"><img src="ball.png"></p></p></body></html>下载全文。

JavaScript结合Canvas绘画画运动小球

JavaScript结合Canvas绘画画运动⼩球⽬录1.实现思路2.静态效果3.总结前⾔：canvas是HTML5新增的元素,也被称为画布,可以结合javascript实现绘制各种图形,制作各种炫酷的动画效果,现在我们也来使⽤canvas画随机运动⼩球。

1.实现思路⾸先为了达到我们想要的效果,可以先创建⼀个构造函数。

给构造函数添加对应的属性和⽅法。

实例化出多个对象,并且保存在数组中。

遍历每个对象,实现画圆。

间隔修改每个球的x,y值。

先准备画布确定对应的宽⾼:<canvas id="canvas" width="400" height="400"></canvas><script>let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');let maxWidth = canvas.width,maxHeight = canvas.height;ctx.fillStyle = '#000';ctx.fillRect(0, 0, maxWidth, maxHeight);</script>因为是随机运动,所以要创建⼀个获取随机数的⽅法:function getRandomNum(minNum, maxNum) {switch (arguments.length) {case 1:return Math.round(Math.random() * minNum + minNum);break;case 2:return Math.round(Math.random() * (maxNum - minNum) + minNum);break;case 0:return 0;break;}}// 创建⼀个Ball的构造函数function Ball(maxWidth, maxHeight, ctx) {this.ctx = ctx;this.maxWidth = maxWidth;this.maxHeight = maxHeight;// 随机半径this.r = getRandomNum(5, 15);// 随机x,y坐标this.x = getRandomNum(this.r, this.maxWidth - this.r);this.y = getRandomNum(this.r, this.maxHeight - this.r);// 平移速度,正负区间是为了移动⽅向多样this.speedX = getRandomNum(-2, 2);this.speedY = getRandomNum(-2, 2);// 颜⾊随机this.color = `rgba(${getRandomNum(0, 255)},${getRandomNum(0, 255)},${getRandomNum(0, 255)},${Math.random()})`;}Ball.prototype = {draw: function () {ctx.beginPath();ctx.fillStyle = this.color;ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);ctx.fill();ctx.closePath();},move: function () {// 判断边界值,让圆球始终保证在画⾯内if (this.x > this.maxWidth - this.r || this.x < this.r) { this.speedX = -this.speedX;}if (this.y > this.maxHeight - this.r || this.y < this.r) { this.speedY = -this.speedY;}this.x += this.speedX;this.y += this.speedY;}};// 创建100个Ball实例let balls = [];for (let i = 0; i < 100; i++) {let newBall = new Ball(maxWidth, maxHeight, ctx); newBall.draw();balls.push(newBall);}2.静态效果现在我们画出了不同半径和颜⾊的静⽌圆球：调⽤move⽅法,间隔修改每个球的x,y值。

js+canvas实现转盘效果（两个版本）

js+canvas实现转盘效果（两个版本）本⽂实例为⼤家分享了js+canvas实现转盘效果的具体代码，供⼤家参考，具体内容如下⽤到了canvas的绘制，旋转，重绘操作，定时器，⽂本，平移，线条，圆，清理画布等等；版本⼀不可以点击，刷新旋转<!DOCTYPE html><html><head><meta charset="UTF-8"><title>转盘抽奖</title><style type="text/css">#myCanvas {background: #FAEBD7;}</style></head><body><canvas id="myCanvas" width="500" height="500"></canvas></body><script type="text/javascript">var myCanvas = document.getElementById("myCanvas");var cxt = myCanvas.getContext("2d");// 平移画布cxt.translate(250, 250);// 圆⼼坐标var oX = 0;var oY = 0;// ⼤圆半径var oR = 150;// ⼩圆半径var oR1 = 50;// 弧度var oH = Math.PI / 180;// 定时器var timer;// ⾓度var angle = 0;// ⽂本var textArr = ["JavaScript", "jQuery", "Vue", "ajax", "rect", "angular", "HTML", "css"];// 颜⾊var colorArr = [];// 随机⽣成颜⾊for (var i = 0; i < textArr.length; i++) {var c = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")" colorArr.push(c);}//起始速度var seep = Math.random() * 100 + 100;timer = setInterval(function() {if (seep < 0.3) {clearInterval(timer);var index = Math.floor(angle / 45);console.log(index);cxt.font = "12px Arial";cxt.textAlign = "center";cxt.textBaseline = "middle"cxt.fillStyle = "black";var txt = textArr[textArr.length - index-1];// console.log(cxt.measureText(txt).width);cxt.fillText(txt, 0, 0);} else {//重绘// 清除画布cxt.clearRect(-250, -250, 500, 500);// 处理⾓度if (angle >= 360) {}// 处理速度seep *= 0.95; // 减⼩速度angle += seep;// 画短线cxt.beginPath();cxt.strokeStyle = "red";cxt.lineWidth = 2;cxt.moveTo(150, 0);cxt.lineTo(180, 0);cxt.stroke();// 保存环境,旋转画布cxt.strokeStyle = "chartreuse";cxt.save();cxt.rotate(angle * oH);// 画扇形for (var i = 0; i < 8; i++) {cxt.fillStyle = colorArr[i];cxt.beginPath();cxt.moveTo(0, 0);cxt.arc(0, 0, 150, i * 45 * oH, (i + 1) * 45 * oH);cxt.closePath();cxt.fill();cxt.stroke();}// 画中⼼圆cxt.fillStyle = "#FFF";cxt.beginPath();cxt.arc(oX, oY, oR1, 0, 2 * Math.PI);cxt.fill();// 添加⽂字for (var i = 0; i < textArr.length; i++) {cxt.save();cxt.rotate((i * 45 + 25) * oH);cxt.fillStyle = "#fff";cxt.font = "16px 微软雅⿊";cxt.fillText(textArr[i], 70, 0);cxt.restore();}cxt.restore();// 环境释放与环境保存成对}}, 50);</script></html>版本⼆加了点击事件<!DOCTYPE html><html><head><meta charset="UTF-8"><title>转盘抽奖</title><style type="text/css">#myCanvas {background: #FAEBD7;}</style></head><body><canvas id="myCanvas" width="500" height="500"></canvas> </body><script type="text/javascript">var myCanvas = document.getElementById("myCanvas");var cxt = myCanvas.getContext("2d");var oX = 0;var oY = 0;// ⼤圆半径var oR = 150;// ⼩圆半径var oR1 = 50;// 弧度var oH = Math.PI / 180;// 定时器var timer;// ⾓度var angle = 0;// ⽂本var textArr = ["JavaScript", "jQuery", "Vue", "ajax", "rect", "angular", "HTML", "css"];// 颜⾊var colorArr = [];// 随机⽣成颜⾊for (var i = 0; i < textArr.length; i++) {var c = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")" colorArr.push(c);}//起始速度var seep = Math.random() * 100 + 100;drawLine();myCanvas.onclick = function(event) {var mX = event.clientX - myCanvas.offsetLeft;var mY = event.clientX - myCanvas.offsetTop;if (cxt.isPointInPath(mX, mY)) {var j = 50;var times = null;if (times == null) {times = setInterval(function() {if (seep < 0.3) {clearInterval(timer);var index = Math.floor(angle / 45);console.log(index);cxt.font = "12px Arial";cxt.textAlign = "center";cxt.textBaseline = "middle"cxt.fillStyle = "black";var txt = textArr[textArr.length - index - 1];cxt.fillText(txt, 0, 0);} else {drawLine();}}, 50);}} else {alert("no")}}function drawLine() {//重绘// 清除画布cxt.clearRect(-250, -250, 500, 500);// 处理⾓度if (angle >= 360) {angle = 0;}// 处理速度seep *= 0.95; // 减⼩速度angle += seep;// 画短线cxt.beginPath();cxt.strokeStyle = "red";cxt.lineWidth = 2;cxt.moveTo(150, 0);cxt.lineTo(180, 0);cxt.stroke();// 保存环境,旋转画布cxt.strokeStyle = "chartreuse";for (var i = 0; i < 8; i++) {cxt.fillStyle = colorArr[i];cxt.beginPath();cxt.moveTo(0, 0);cxt.arc(0, 0, 150, i * 45 * oH, (i + 1) * 45 * oH);cxt.closePath();cxt.fill();cxt.stroke();}// 画中⼼圆cxt.fillStyle = "#FFF";cxt.beginPath();cxt.arc(oX, oY, oR1, 0, 2 * Math.PI);cxt.fill();// 添加⽂字for (var i = 0; i < textArr.length; i++) {cxt.save();cxt.rotate((i * 45 + 25) * oH);cxt.fillStyle = "#fff";cxt.font = "16px 微软雅⿊";cxt.fillText(textArr[i], 70, 0);cxt.restore();}cxt.restore();// 环境释放与环境保存成对}</script></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。