来源：未知 时间：2021-05-07 00:20 作者：小飞侠 阅读:次
[导读] 今天代码真正的根据抛物线公式得出的抛物线动画。 思维导图： 思路： 根据抛物线数学公式 y = a*x*x +b*x +c 1: c是于Y轴交点，假设A点是原点那么C是0 2: 所以 y = a*x*x + b *x 3: a是决定抛物...
|
今天代码真正的根据抛物线公式得出的抛物线动画。
思维导图：
思路： 根据抛物线数学公式 y = a*x*x +b*x +c 1: c是于Y轴交点，假设A点是原点那么C是0 2: 所以 y = a*x*x + b *x 3: a是决定抛物线向上还是向下因素，数值越小约平滑，如果是0就会是直线了，所以设置 0.003. 4: 所以 b = ( a*x*x) / x 5: x是单位时间内运行的 A->B的区间距离， 可以根据定时器或次数（设定多少次执行完动画的次数） 6: 我为了省事将动画执行50次，所以我的 x = A->B距离 / 50 * 档次执行次数 将思路带入程序： <!DOCTYPE html>
<html>
<head>
<title>太阳系</title>
<style type="text/css" media="screen">
body{
margin: 0px; padding: 0px;
}
</style>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 0px auto; width: 800; height: 500px;">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas>
</div>
<script type="text/javascript">
window.requestAnmFrame = (function(){
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequstAnimationFrame || window.oRequetAnimationFrame || window.msRequestAnimationFrame || function(callback){
window.setTimeout(callback, 100/60)
};
})();
var obj = {
canvasEr:null,
canvasContent: null,
data: {
a1x:100,
a1y:400,
b1x:600,
b1y:200,
num:1,
radian:-0.003, // 曲线弧度, >0 开口向上 <0 开口向下
cont:50,
b:0
},
init:function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 500;
obj.canvasEr = canvas;
obj.canvasContent = canvas.getContext('2d');
var dy = Math.abs(obj.data.b1y - obj.data.a1y);
var dx = Math.abs(obj.data.b1x - obj.data.a1x);
this.data.dy = dy;
this.data.dx = dx;
// 公式 y = a*x*x + b*x + c , b = (y - a*x*x) / x
this.data.b = (dy - this.data.radian * dx * dx) / dx
this.autoDraw()
this.drawA()
},
// 绘制标准
drawA(){
// obj.clearReact(); // 清除画布
var x = obj.data.x, y = 200, r = 50;
var _ob = obj.drawArc({
x:obj.data.a1x,
y:obj.data.a1y,
r:20,
lcorlor:'yellow',
bgcolor: 'red',
isFull: true
}).
drawArc({
x:obj.data.b1x,
y:obj.data.b1y,
r:20,
lcorlor:'yellow',
bgcolor: 'red',
isFull: true
})
},
drawB() {
//this.clearReact();
this.drawA();
var _ax1 = this.data.dx / this.data.cont * obj.data.num;
var _ay1 = this.data.radian * _ax1 * _ax1 + this.data.b * _ax1;
obj.drawArc({
x:obj.data.a1x + _ax1,
y:obj.data.a1y - _ay1,
r:20,
lcorlor:'red',
bgcolor: 'yellow',
isFull: true
})
obj.data.firstAngle -= obj.data.pxAngle
},
clearReact: function(){
obj.canvasContent.clearRect(0, 0, 800, 500);
},
moveTo:function(x,y){
obj.canvasContent.moveTo(x, y);
},
/**
* @author lucky
* @DateTime 2021-05-02T22:56:11+0800
* @param {[type]} pms [x,y,r,lw,lcorlor,bgcolor,isFull ,isStroke ,firstAngle, endAngle, anticlockwise]
* @return {[type]} [obj]
*/
drawArc:function(pms){
if (!pms || typeof pms !== 'object') {
return
}
var _firstAngle = typeof pms.firstAngle === 'number' ? pms.firstAngle : 0,
_endAngle = typeof pms.endAngle === 'number' ? pms.endAngle : Math.PI * 2,
_isFull = typeof pms.isFull === 'boolean'? pms.isFull : true,
_isStroke = typeof pms.isStroke === 'boolean' ? pms.isStroke : true,
_anticlockwise = typeof pms.anticlockwise === 'boolean' ? pms.anticlockwise : false;
this.moveTo(pms.x,pms.y);
obj.canvasContent.beginPath();
obj.canvasContent.arc(pms.x, pms.y, pms.r, _firstAngle, _endAngle, _anticlockwise);
// 设置属性
obj.canvasContent.lineWidth = pms.lw;
obj.canvasContent.fillStyle = pms.bgcolor;
_isFull && obj.canvasContent.fill();
// 绘制路径
obj.canvasContent.strokeStyle = pms.lcorlor;
_isStroke && obj.canvasContent.stroke();
obj.canvasContent.closePath();
return obj;
},
autoDraw: function(){
// console.log('执行自动绘制',obj.data.num)
if (obj.data.num > obj.data.cont){
return
}
obj.drawB()
obj.data.num ++
// 动画
requestAnmFrame(obj.autoDraw)
}
}
window.onload = function(){
obj.init()
}
</script>
</body>
</html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
