先看看效果
另外一種效果
實作思路
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>
給個三連吧，謝謝！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/256697.html
標籤：其他
上一篇：vjudge比賽題解