来源：未知 时间：2021-05-03 00:22 作者：小飞侠 阅读:次
[导读] 如何利用canvas绘制圆形运动动画？ 可以利用直角三角形函数带入公式计算，先温习下直角三角形函数。 根据上图得知： 1：我们已知圆形的半径 r 2: 我们知道运行角度，可以理解为 圆...
|
如何利用canvas绘制圆形运动动画？ 可以利用直角三角形函数带入公式计算，先温习下直角三角形函数。
根据上图得知： 1：我们已知圆形的半径 r 2: 我们知道运行角度，可以理解为 圆形 360度 / 每次运行角度 根据以上2个条件就可以求出每次运行结束 X, Y值， 效果预览：https://www.zixuephp.com/static/res/canvas/test/canvas-round.html
代码： <!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: {
x: 200,
angle:0,
angleC:0,
direction: 'right'
},
init:function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 500;
obj.canvasEr = canvas;
obj.canvasContent = canvas.getContext('2d');
console.dir(obj)
this.autoDraw()
this.drawSmile()
},
// 绘制笑脸
drawSmile(){
obj.clearReact(); // 清除画布
var x = obj.data.x, y = 200, r = 50;
// 绘制大圆 x,y,r,0 ,'yellow','red', true
var _ob = obj.drawArc({
x:x,
y:y,
r:r,
lcorlor:'yellow',
bgcolor: 'red',
isFull: true
})
.drawArc({
x:x,
y:y,
r:100,
lcorlor:'red',
bgcolor: '',
isFull: false
})
.drawArc({
x:x,
y:y,
r:150,
lcorlor:'red',
bgcolor: 'yellow',
isFull: false
});
},
drawSmileB() {
obj.clearReact();
obj.drawSmile();
obj.drawSmileC();
obj.drawArc({
x:200 + (Math.cos((Math.PI / 180) * obj.data.angle) * 100),
y:200 + (Math.sin((Math.PI / 180) * obj.data.angle) * 100),
r:20,
lcorlor:'red',
bgcolor: 'yellow',
isFull: true
})
obj.data.angle += 3
if (obj.data.angle >= 360){
obj.data.angle = 0
}
},
drawSmileC() {
obj.clearReact();
obj.drawSmile();
obj.drawArc({
x:200 + (Math.cos((Math.PI / 180) * obj.data.angleC) * 150),
y:200 + (Math.sin((Math.PI / 180) * obj.data.angleC) * 150),
r:30,
lcorlor:'yellow',
bgcolor: 'green',
isFull: true
})
obj.data.angleC += 1
if (obj.data.angleC >= 360){
obj.data.angleC = 0
}
},
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.drawSmileB()
// 动画
requestAnmFrame(obj.autoDraw)
}
}
window.onload = function(){
obj.init()
}
</script>
</body>
</html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
