先看看效果

 

另外一种效果

 

实现思路

1.绘制好两个小球

2.让左边小球的圆心X增加,右边小球圆心X的减少,到了一定位置再回转(第1种效果)

  让两个小球一个scale增加,一个scale减少,到一定范围后反转(第2种效果)

 

创建小球的构造函数
//构造函数 function Ball(o){ this.x=0,//圆心X坐标 this.y=0,//圆心Y坐标 this.r=0,//半径
this.startAngle=0,//开始角度 this.endAngle=0,//结束角度
this.anticlockwise=false;//顺时针,逆时针方向指定 this.stroke=false;//是否描边
this.fill=false;//是否填充 this.scaleX=1;//缩放X比例 this.scaleY=1;//缩放Y比例
this.init(o); } //初始化 Ball.prototype.init=function(o){ for(var key in o){
this[key]=o[key]; } } //绘制 Ball.prototype.render=function(context){ var
ctx=context; ctx.save(); ctx.beginPath();
ctx.translate(this.x,this.y);//设置原点的位置
ctx.scale(this.scaleX,this.scaleY);//设定缩放
ctx.arc(0,0,this.r,this.startAngle,this.endAngle);//画圆 if(this.lineWidth){//线宽
ctx.lineWidth=this.lineWidth; } if(this.fill){//是否填充
this.fillStyle?(ctx.fillStyle=this.fillStyle):null; ctx.fill(); }
if(this.stroke){//是否描边
this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null; ctx.stroke(); }
ctx.restore(); return this; }
生成2个小球,并render渲染
var ctx = canvas.getContext('2d'); //创建小球 var xArr=[10,22]; var yArr=[10,10];
var ball1 = new Ball({ x:xArr[0], y:yArr[0], r:6, startAngle:0,
endAngle:2*Math.PI, fill:true, fillStyle:'green', lineWidth:1.2 }).render(ctx);
var ball2 = new Ball({ x:xArr[1], y:yArr[1], r:6, startAngle:0,
endAngle:2*Math.PI, fill:true, fillStyle:'red', lineWidth:1.2 }).render(ctx);
此时效果是这样的:

加入动画函数(第一种旋转效果)
var a=1.04;//加速度 var dir=1;//方向 var dis=1;//X轴移动初始值 move=function(){ //清理画布
ctx.clearRect(0,0,W,H); //通过加速度计算移动值 dis *= a; //更改x轴位置 ball1.x+=dir*dis;
ball2.x-=dir*dis; //计算缩放比例 ball1.scaleX=computedScale(-dir,0.005,ball1.scaleX);
ball1.scaleY=computedScale(-dir,0.005,ball1.scaleY);
ball2.scaleX=computedScale(dir,0.005,ball2.scaleX);
ball2.scaleY=computedScale(dir,0.005,ball2.scaleY); //到达指定位置后 if(ball1.x>=22 ||
ball2.x>=22 || ball1.x<=10 || ball2.x<=10){ //设定缩放比例 ball1.scaleX=ball2.scaleX;
ball1.scaleY=ball2.scaleY; ball2.scaleX=ball1.scaleX;
ball2.scaleY=ball1.scaleY; //还原X轴移动初始值 dis=1; //变更移动方向 dir=-dir; } //绘制
if(dir>0){//方向不一样时,小球的绘制顺序要交换,移模拟旋转 ball2.render(ctx); ball1.render(ctx);
}else{ ball1.render(ctx); ball2.render(ctx); } }
加入第2种动画函数
move=function(){ //清理画布 ctx.clearRect(0,0,W,H); //更新
ball1.scaleX=computedScale(-dir,0.1,ball1.scaleX);
ball1.scaleY=computedScale(-dir,0.1,ball1.scaleY);
ball2.scaleX=computedScale(dir,0.1,ball2.scaleX);
ball2.scaleY=computedScale(dir,0.1,ball2.scaleY); //到达指定缩放比例后变更方向,来控制小球变大变小
if(ball1.scaleX<=0.5||ball2.scaleX<=0.5){ dir=-dir; } //绘制 ball1.render(ctx);
ball2.render(ctx); }
封装后完整代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="GBK"> <title></title>
<style> *{ margin: 0; padding: 0; } </style> </head> <body> <button
onclick='start()'>开始</button> <button onclick='stop()'>结束</button> <div
id='process'> </div> <script type="text/javascript"> var timmer=null; function
start(){ if(timmer) return ;//防止重复点击 var process =
document.getElementById('canvasDiv'); process.style.display="block";
timmer=setInterval(move,50);//开始任务 } function stop(){ var process =
document.getElementById('canvasDiv'); process.style.display="none";
clearInterval(timmer); //结束任务 timmer=null; } //构造函数 function Ball(o){
this.x=0,//圆心X坐标 this.y=0,//圆心Y坐标 this.r=0,//半径 this.startAngle=0,//开始角度
this.endAngle=0,//结束角度 this.anticlockwise=false;//顺时针,逆时针方向指定
this.stroke=false;//是否描边 this.fill=false;//是否填充 this.scaleX=1;//缩放X比例
this.scaleY=1;//缩放Y比例 this.init(o); } //初始化 Ball.prototype.init=function(o){
for(var key in o){ this[key]=o[key]; } } //绘制
Ball.prototype.render=function(context){ var ctx=context; ctx.save();
ctx.beginPath(); ctx.translate(this.x,this.y);//设置原点的位置
ctx.scale(this.scaleX,this.scaleY);//设定缩放
ctx.arc(0,0,this.r,this.startAngle,this.endAngle);//画圆 if(this.lineWidth){//线宽
ctx.lineWidth=this.lineWidth; } if(this.fill){//是否填充
this.fillStyle?(ctx.fillStyle=this.fillStyle):null; ctx.fill(); }
if(this.stroke){//是否描边
this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null; ctx.stroke(); }
ctx.restore(); return this; } function computedScale(dir,dis,val){//计算缩放比例 var
value = val*1000+dir*(dis*1000); return value/1000; } createCanvas(); var move;
function createCanvas(){ var process = document.getElementById('process'); var
div = document.createElement('div'); div.id="canvasDiv";
div.style.cssText="position:absolute;top:50px;left:30px;display:none;"; var
canvas = document.createElement('canvas'); var W = canvas.width = 34; var H =
canvas.height = 20; div.appendChild(canvas); process.appendChild(div); var ctx
= canvas.getContext('2d'); //创建小球 var xArr=[10,22]; var yArr=[10,10]; var ball1
= new Ball({ x:xArr[0], y:yArr[0], r:6, startAngle:0, endAngle:2*Math.PI,
fill:true, fillStyle:'green', lineWidth:1.2 }).render(ctx); var ball2 = new
Ball({ x:xArr[1], y:yArr[1], r:6, startAngle:0, endAngle:2*Math.PI, fill:true,
fillStyle:'red', lineWidth:1.2 }).render(ctx); var a=1.04;//加速度 var dir=1;//方向
var dis=1;//X轴移动初始值 move=function(){ //清理画布 ctx.clearRect(0,0,W,H);
//通过加速度计算移动值 dis *= a; //更改x轴位置 ball1.x+=dir*dis; ball2.x-=dir*dis; //计算缩放比例
ball1.scaleX=computedScale(-dir,0.005,ball1.scaleX);
ball1.scaleY=computedScale(-dir,0.005,ball1.scaleY);
ball2.scaleX=computedScale(dir,0.005,ball2.scaleX);
ball2.scaleY=computedScale(dir,0.005,ball2.scaleY); //到达指定位置后 if(ball1.x>=22 ||
ball2.x>=22 || ball1.x<=10 || ball2.x<=10){ //设定缩放比例 ball1.scaleX=ball2.scaleX;
ball1.scaleY=ball2.scaleY; ball2.scaleX=ball1.scaleX;
ball2.scaleY=ball1.scaleY; //还原X轴移动初始值 dis=1; //变更移动方向 dir=-dir; } //绘制
if(dir>0){//方向不一样时,小球的绘制顺序要交换,移模拟旋转 ball2.render(ctx); ball1.render(ctx);
}else{ ball1.render(ctx); ball2.render(ctx); } } /* move=function(){ //清理画布
ctx.clearRect(0,0,W,H); //更新 ball1.scaleX=computedScale(-dir,0.1,ball1.scaleX);
ball1.scaleY=computedScale(-dir,0.1,ball1.scaleY);
ball2.scaleX=computedScale(dir,0.1,ball2.scaleX);
ball2.scaleY=computedScale(dir,0.1,ball2.scaleY); //到达指定缩放比例后变更方向,来控制小球变大变小
if(ball1.scaleX<=0.5||ball2.scaleX<=0.5){ dir=-dir; } //绘制 ball1.render(ctx);
ball2.render(ctx); } */ } </script> </body> </html>
给个三连吧,谢谢!

技术
©2019-2020 Toolsou All rights reserved,
Vue.js入门(五)---在vue中使用echarts词云Pandas统计分析基础_数据处理(DataFrame常用操作)element UI dialog点击dialog区域外会关闭dialog应届毕业生看过来!Java面试经典77问,看完离工作就不远了关于蓝桥杯大赛,你应该了解的那些事!mysql 分区-key分区(五)海康威视-嵌入式软件笔试题PHP Redis 监听过期的 key 事件C语言循环语句笔记详解以及练习-折半查找算法、猜数字游戏JVM概述