CANVAS循环清画板(requestAnimationFrame)答案

【问题标题】：CANVAS clear the drawing board in a loop(requestAnimationFrame)CANVAS循环清画板(requestAnimationFrame)
【发布时间】：2019-09-10 20:43:52
【问题描述】：

我正在尝试使用 requestAnimationFrame 在画布中进行交互。问题，我被困住了，是清除和制作“空白”画布空间的功能似乎无法循环工作。作为之前的测试，我下面的代码可能看起来不完整或者不是更好，因为这是基础尝试做得更好（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() 在形状绘制上会改变，但不会改变方式我需要它。感谢您的线索，我没有看到什么问题...

【问题讨论】：

函数开头drawRect添加ctx.beginPath()
很好，它工作得很好，谢谢:)

标签： javascript html5-canvas

【解决方案1】：

您可以通过 hack（使用它的画布）清除上下文：

canvas.width = canvas.width

【讨论】：

这不是问题...这不是我想清楚的上下文，而是绘图；）还是感谢您尝试回答。