纸短情长
纸短情长
  • 发布:2019-10-09 17:58
  • 更新:2019-10-10 12:09
  • 阅读:2454

uniapp Canvas 在 app上刷新有问题

分类:uni-app

我用Canvas显示图片动画,在浏览器上是正常(包括手机浏览器),但是打包到Android APP,就帧率非常低

关键代码:

setInterval(function () {  
				 //context.clearRect(0,0,width,height)  
				  
				   
				 for (let _i = 0; _i < 100; _i++) {   
				     var _x = pos[_i].x;  
					 var _y = pos[_i].y;  
					   
					context.setTransform(size,0,0,size,_x,_y)  
					context.rotate(angle++*Math.PI/180)				   
					context.drawImage("/static/logo.png",w,h)  
					//context.draw(true);  
					if(angle>=360)  
						angle = 0;  
					  
					if(xxx>2)  
						xxx = 0;  
					xxx += 0.01;  
					  
					size += add;  
					if(size>2 || size<0.5)  
						add *= -1;  
					//angle = 46  
				}  
                               context.draw();  
			 },30); 

视屏效果

效果地址:http://player.youku.com/embed/XNDM5MTczMzQyNA=
网页和手机APP上运行效果

完整代码:

<template>  
    <view>  
        <canvas style="width: 600px; height: 800px; background: #007AFF;" canvas-id="firstCanvas"></canvas>  
    </view>  
</template>  
<script>  
	 export default {  
	     onReady: function (e) {  
			 let width = 600;  
			 let height = 800;  
	           
                         var context = uni.createCanvasContext('firstCanvas')  
			 var x = 10;  
			 var y = 10;  
	   
			 context.setTransform(1,0,0,1,100,100)  
			 context.rotate(45*Math.PI/180)  
			 context.drawImage("/static/logo.png",0,0)  
			 context.draw();  
			   
			 let w = -72/2;  
			 let h = -72/2;  
			   
			 let angle = 0;  
			 let xxx = 0.0;  
			 let size = 1.0;  
			 let pos = [];  
			 for (let i = 0; i < 100; i++) {   
				 pos[i] = {x:Math.random()*width,y:Math.random()*height};  
			 }  
			 let add = 0.001;  
			 setInterval(function () {  
				 //context.clearRect(0,0,width,height)  
				   
				 for (let _i = 0; _i < 100; _i++) {   
				     var _x = pos[_i].x;  
					 var _y = pos[_i].y;  
					   
					context.setTransform(size,0,0,size,_x,_y)  
					context.rotate(angle++*Math.PI/180)				   
					context.drawImage("/static/logo.png",w,h)  
					//context.draw(true);  
					if(angle>=360)  
						angle = 0;  
					  
					if(xxx>2)  
						xxx = 0;  
					xxx += 0.01;  
					  
					size += add;  
					if(size>2 || size<0.5)  
						add *= -1;  
					//angle = 46  
				}  
                                context.draw();  
			 },30);  
	     },  
	     methods: {  
	         canvasIdErrorCallback: function (e) {  
	             console.error(e.detail.errMsg)  
	         }  
	     }  
	 }  
</script>  
  
<style>  
	.content {  
		display: flex;  
		flex-direction: column;  
		align-items: center;  
		justify-content: center;  
	}  
  
	.logo {  
		height: 200upx;  
		width: 200upx;  
		margin-top: 200upx;  
		margin-left: auto;  
		margin-right: auto;  
		margin-bottom: 50upx;  
	}  
  
	.text-area {  
		display: flex;  
		justify-content: center;  
	}  
  
	.title {  
		font-size: 36upx;  
		color: #8f8f94;  
	}  
</style>
2019-10-09 17:58 负责人:无 分享
已邀请:
9***@qq.com

9***@qq.com

至少60毫秒

  • 纸短情长 (作者)

    你的意思是说最大帧率最多只有 1000/60=16.6 ?


    2019-10-10 09:28

DCloud_heavensoft

DCloud_heavensoft

这个是因为逻辑层和渲染层是2个进程导致的,相互通信有几十毫秒的耗时。

  1. 减少调用频次
  2. 使用web-view组件,用html方式实现

该问题目前已经被锁定, 无法添加新回复