我正在尝试使用requestAnimationFrame在画布中做交互式的东西。我坚持的问题是，清除和制作"空白"画布空间的功能似乎无法循环工作。作为以前的测试，我下面的代码可能看起来不完整或不是更好的代码，因为 base 试图做得更好(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('statesn 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(( 和该绘制更改，但不是我需要它的方式。感谢您的线索，我没有看到有什么问题...
您可以通过黑客清除上下文(使用它的画布(：
canvas.width = canvas.width