网站地图    收藏   

主页 > 采坑 > 前端采坑 > canvas采坑 >

canvas如何让画的图形动起来

来源:未知    时间:2021-05-02 21:48 作者:小飞侠 阅读:

[导读] 如何让图形动起来?其实只需一个代码window.requestAnimationFrame 此API是浏览器级的,理解为帧刷新,传给它一个回调函数即可。 话不多说上代码: !DOCTYPEhtmlhtmlheadtitle微笑/titlestyletype=tex...

如何让图形动起来?其实只需一个代码 window.requestAnimationFrame 此API是浏览器级的,理解为帧刷新,传给它一个回调函数即可。

image.png


效果预览: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

添加评论