Я пытаюсь сделать интерактивные вещи на холсте, используя requestAnimationFrame.Проблема, с которой я застрял, заключается в том, чтобы очистить и сделать так, чтобы «пустое» пространство холста не работало в цикле.как и в предыдущих тестах, мой код, приведенный ниже, может выглядеть неполным или не лучшим, потому что эта база пытается работать лучше (ООП и 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() на чертеже формы и для этого изменения меняются, но не так, как мне это нужно.Спасибо за ваши подсказки, я не видел в чем проблема ...