Node.js 画布的背景无意中出现在前面
我有9个插槽,我希望能够在我的行动对话中填充元素。Node.js 画布的背景无意中出现在前面,node.js,canvas,dialogflow-es,actions-on-google,Node.js,Canvas,Dialogflow Es,Actions On Google,我有9个插槽,我希望能够在我的行动对话中填充元素。frame()函数设计交互式画布的背景。因此,我想一开始就把它叫做。问题是当我画第二个元素时,前一个元素消失了。我已经找到了原因frame()似乎每次都会重新绘制背景 我尝试在回调函数中调用frame(),以获得默认的欢迎意图,但没有任何更改。我还让函数noop()和foo()只调用frame()一次。。没有结果。 然后,每次把背景放在前面后,我都试图重新绘制前面的元素,但这也不起作用。 我也无法使用div在index.html中重新创建插槽。矩
frame()
函数设计交互式画布的背景。因此,我想一开始就把它叫做。问题是当我画第二个元素时,前一个元素消失了。我已经找到了原因frame()
似乎每次都会重新绘制背景
我尝试在回调函数中调用frame(),以获得默认的欢迎意图,但没有任何更改。我还让函数noop()
和foo()
只调用frame()
一次。。没有结果。
然后,每次把背景放在前面后,我都试图重新绘制前面的元素,但这也不起作用。
我也无法使用div
在index.html中重新创建插槽。矩形显示在整个画布框架的上方或下方
有人知道怎么解决这个问题吗?或者您认为最简单的解决方案是创建背景的.jpg
,并将其设置为html文件中画布的style=“background url(“…”)”
感谢您的帮助
“严格使用;”
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
//尝试在之后重新绘制以前的元素失败
//无意中将背景带到前面:
var prevReqs=[]//见第26行和第78行
var-iD=1;
风险值要求=[
新规定(50,50),
新规定(500,50),
新要求(950,50),
新规定(50250),
新规定(500250),
新规定(950250),
新规定(50450),
新规定(500450),
新要求(950450),
];
常量回调={
onUpdate(州){
if(状态为“iD”){
iD=state.iD;
//预请求推送(iD);
drawRec();
}
},
};
函数drawRec(){
requestAnimationFrame(drawRec);//启用绘图
需求[iD-1]。drawRequirement();
}
功能需求(xCoord、yCoord){
this.xCoord=xCoord;
this.yCoord=yCoord;
this.drawRequirement=function(){//绘制元素
ctx.beginPath();
ctx.lineWidth=“1”;
ctx.strokeStyle=“#000000”;
ctx.fillStyle=“#FFFFFF”;
ctx.rect(xCoord,yCoord,200100);
ctx.fill();
ctx.stroke();
ctx.moveTo(xCoord,yCoord+33);
ctx.lineTo(xCoord+200,yCoord+33);
ctx.stroke();
ctx.font=“12px Arial”;
ctx.fillStyle=“#000000”;
ctx.strokeStyle=“#000000”;
ctx.textAlign=“左”;
ctx.fillText(“id:+id,xCoord+5,yCoord+47);
}
}
//背景。。。问题函数
函数框架(){
请求动画帧(帧);
ctx.fillStyle=“#D6EAF8”;
ctx.strokeStyle=“#D6EAF8”;
ctx.rect(0,01200600);
ctx.stroke();
ctx.fill();
for(设i=0;i
我怀疑它做的并不是你认为它在做的事情(从你如何使用它以及旁边的评论判断)。它做的是而不是“启用绘图”
它所做的是请求在下一次渲染引擎将要进行重新绘制之前调用名为的函数。这可以用于更新动画(因此得名),但也有非动画用途。在动画中使用时,通常具有执行绘图调用的函数requestAnimationFrame()
再次命名相同的函数-将其放入一个无休止的循环中
这就是您在这里要做的。您认为您只调用了一次frame()
,但因为,在这里面,您有一行代码
requestAnimationFrame(frame);
它将呈现函数中的内容,然后在重新呈现布局之前(通常它愿意每秒执行60次左右),它会一遍又一遍地重新调用您的函数
因此,frame()
不断被调用的原因是,它请求不断被调用
根据您的实际需要,您有几种方法:
放下那一行,除非你在做动画,否则没必要
如果您正在根据iD
的值制作动画,则您的onUpdate
可以只设置iD
的值,并让frame()
根据iD绘制东西
顺便说一句,您的情况并非如此,但是发布webhook代码的一个原因是要准确地查看您在ImmersiveResponse
对象中发送的内容。如果您每次都发送url
参数,那么您每次都会重新加载页面(从而重新绘制背景)。您能吗[更新您的问题](编辑)以包含您在webhook上使用的代码,该webhook正在初始化交互式画布并更新状态?哦,当然,抱歉。已更新