Question

我正在尝试使用requestAnimationFrame在画布中进行交互式操作。我坚持认为，问题是要清除的functoin并使“空白”画布空间似乎无法循环工作。如先前的测试所示，我的以下代码可能看起来不完整或不是更好的代码，这是因为该代码试图做得更好（OOP和MV +）。我可以将“测试方块”移动为基本形状，但旧的图形仍在屏幕上。在基本的HTML中，例如：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test jeu action</title>
<style type="text/css" rel="stylesheet" >
body{margin:0;padding:0;background-color:#000;overflow:hidden;}
</style>
</head>
<body>
<script>/* i separate it for easier view on forum see further*/
</script></body></html>

我有以下JS：

/** global fn as tools */
function isReal(v){return v!='undefined' && v!=null ? true:false; }

/** animation loop */
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
function animate(){
	if(ctrls.input.states.up==true){rc.y-=moveSpeed;}
	if(ctrls.input.states.down==true){rc.y+=moveSpeed;}
	if(ctrls.input.states.left==true){rc.x-=moveSpeed;}
	if(ctrls.input.states.right==true){rc.x+=moveSpeed;}
	cnv.ctx.fillStyle = '#c0ffc0';
	cnv.ctx.clearRect(0, 0, cnv.w, cnv.h);//-- fill BG/clear canvas drawing 
	drawRect(cnv.ctx, rc.x,rc.y,rc.w,rc.h,'#ff0000', '#0000ff');
	requestAnimationFrame(animate);

}
/** graphic as sketching Canvas 2d */
function addCanvas(id,ancestor,w,h){
	let c=document.createElement('canvas');
    c.id=id;
	c.setAttribute('WIDTH', w);
	c.setAttribute('HEIGHT', h);
	ancestor.appendChild(c);
	return {tag:c, ctx:c.getContext('2d'), w:w, h:h};/*-- suppose that CANVAS and CanvasRendere2d are supported in running script environment , todo: add real CANVAS test + polyfil*/
}

function drawRect(ctx,x, y, w, h, stk='#ffffff', fll='#ffffff'){//-- set stk or fll to false(or null) to set drawing options
	if(typeof ctx== typeof document.createElement('canvas').getContext('2d')){
		ctx.rect(x,y,w,h);
		if(isReal(stk) && stk!=false){
			ctx.strokeStyle=stk;
			ctx.stroke();
			console.log('drawRect stroke '+x+','+y+','+w+','+h+' '+stk);
		}
		if(isReal(fll) && fll!=false){
			ctx.fillStyle=fll;
			ctx.fill();
			console.log('drawRect fill '+x+','+y+','+w+','+h+' '+fll);

		}
		
		return ctx;
	}
	console.log('WRONG Drawing Context: '+ctx+' must be CanvasRenderer2D');
	return;
}


let cnv=addCanvas('cnv',document.body, window.innerWidth,window.innerHeight );
console.log('window canvas size: '+cnv.w+'X'+cnv.h);
function testItem(){let tmp=Math.round(cnv.w/50);return {w:tmp, h:tmp, x:tmp,y:tmp}}
let rc=testItem();
console.log('('+rc.x+' '+rc.y+')');


/** INPUTs MANAGEMENT : Controls (keyboard) */
function Controls(id){
return{
	id:id,
	input:{
		states:{},
		keys:{
			up:38,
			down:40,
			right:39,
			left:37
			}
		}
	}
}

let moveSpeed=2;
let ctrls = Controls('controler');
document.addEventListener('keydown', function(e){
	switch(e.keyCode){
		case ctrls.input.keys.up:
			ctrls.input.states['up']=true;
		break;
		case ctrls.input.keys.right:
			ctrls.input.states['right']=true;
		break;
		case ctrls.input.keys.down:
			ctrls.input.states['down']=true;
		break;
		case ctrls.input.keys.left:
			ctrls.input.states['left']=true;
		break;
		default:/* no assigned control, do nothing*/;
		break;
	}
	console.log('states\n up:'+ctrls.input.states.up+'\t right:'+ctrls.input.states.right+'\t down:'+ctrls.input.states.down+'\t left:'+ctrls.input.states.left);
});
document.addEventListener('keyup', function(e){
	switch(e.keyCode){
		case ctrls.input.keys.up:if(isReal(ctrls.input.states['up'])){ctrls.input.states.up=false;}
		break;
		case ctrls.input.keys.right:if(isReal(ctrls.input.states['right'])){ctrls.input.states.right=false;}
		break;
		case ctrls.input.keys.down:if(isReal(ctrls.input.states['down'])){ctrls.input.states.down=false;}
		break;
		case ctrls.input.keys.left:if(isReal(ctrls.input.states['left'])){ctrls.input.states.left=false;}
		break;

		default:;break;
	}
});

let anim=animate();

body{margin:0;padding:0;background-color:#000;overflow:hidden;}

我尝试使用.save（）.restore（）（在第一次绘制时），它不会更改任何内容，而.beginPath（）.closePath（）在形状图上进行更改，对于该绘制更改，但不是更改方式我需要它。谢谢您的提示，我没有发现问题所在...

Answer 1

您可以通过黑客（使用画布）清除上下文：

canvas.width = canvas.width

CANVAS循环清除绘图板（requestAnimationFrame）

1 个答案: