来源：未知 时间：2021-05-02 21:48 作者：小飞侠 阅读:次
[导读] 如何让图形动起来？其实只需一个代码window.requestAnimationFrame 此API是浏览器级的，理解为帧刷新，传给它一个回调函数即可。 话不多说上代码： !DOCTYPEhtmlhtmlheadtitle微笑/titlestyletype=tex...
|
如何让图形动起来？其实只需一个代码 window.requestAnimationFrame 此API是浏览器级的，理解为帧刷新，传给它一个回调函数即可。
效果预览：https://www.zixuephp.com/static/res/canvas/test/canvas-smile.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: 100,
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()
},
// 绘制笑脸
drawSmile(){
obj.clearReact(); // 清除画布
var x = obj.data.x, y = 150, r = 100;
// 绘制大圆
obj.drawArc(x,y,r,5,'red','green', true);
// 绘制小眼睛
obj.drawArc(x - 50,120,20,0,'','red');
obj.drawArc(x + 50,120,20,0,'','red');
//绘制嘴巴
obj.drawArc(x,160,50,5,'red','', false, 0 , Math.PI);
// console.log(obj.data.x)
if (obj.data.direction === 'right'){
obj.data.x ++
if (obj.data.x >= 700){
obj.data.x == 700
obj.data.direction = 'left'
}
} else {
obj.data.x --
if (obj.data.x <= 100){
obj.data.x == 100
obj.data.direction = 'right'
}
}
},
clearReact: function(){
obj.canvasContent.clearRect(0, 0, 800, 500);
},
moveTo:function(x,y){
obj.canvasContent.moveTo(x, y);
},
/**
* @author lucky
* @DateTime 2021-05-02T19:51:05+0800
* @param {[type]} x [description]
* @param {[type]} y [description]
* @param {[type]} r [description]
* @param {[type]} lw [description]
* @param {[type]} lcorlor [description]
* @param {[type]} bgcolor [description]
* @param {[type]} firstAngle [description]
* @param {[type]} endAngle [description]
* @param {[type]} anticlockwise [description]
* @return {[type]} [description]
*/
drawArc:function(x,y,r,lw,lcorlor,bgcolor,isFull ,firstAngle, endAngle, anticlockwise){
var _firstAngle = typeof firstAngle === 'number' ? firstAngle : 0,
_endAngle = typeof endAngle === 'number' ? endAngle : Math.PI * 2,
_isFull = typeof isFull === 'boolean'? isFull : true,
_anticlockwise = typeof anticlockwise === 'boolean' ? anticlockwise : false;
this.moveTo(x,y);
obj.canvasContent.beginPath();
obj.canvasContent.arc(x, y, r, _firstAngle, _endAngle, _anticlockwise);
// 设置属性
obj.canvasContent.lineWidth = lw;
obj.canvasContent.fillStyle = bgcolor;
_isFull && obj.canvasContent.fill();
// 绘制路径
obj.canvasContent.strokeStyle = lcorlor;
obj.canvasContent.stroke();
obj.canvasContent.closePath();
},
autoDraw: function(){
// console.log('执行自动绘制')
obj.drawSmile()
// 动画
requestAnmFrame(obj.autoDraw)
}
}
window.onload = function(){
obj.init()
}
</script>
</body>
</html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
