矩形在画布上绘制但立即消失

时间：2017-09-06 18:06:52

标签： javascript html5-canvas rect

所以我正在做一个项目而且我正在开发一种跌倒式游戏。

问题似乎出现在这一行：createRect(20, 40, 25, 15, "red");

看起来像是拉出了矩形，但是对于如何解决这个问题却立即消失了吗？我不确定为什么会发生这种情况，而且我正在学习javascript，所以我没有经验来理解为什么会这样？

1 个答案:

答案 0 :(得分：0)

问题是你每秒都要重复几次卡巴斯大小：

<FORM action="/" method="post" id="userform">
<table Class="TR1">			
<Caption Class="CAP"> 		Product characteristics	</Caption>
<thead class="TR1">			
<tr>			
	<Th class="TH1">	Group	</Th>
	<Th class="TH2">	Parameter	</Th>
	<Th class="TH3">	Value	</Th>
	<Th class="TH4">	Type	</Th>
	<Th class="TH5">	Subval	</Th>
	<Th class="TH5">		</Th>
	<Th class="TH5">		</Th>
</TR>						
</Thead>			
<tbody class="TR1">			
<tr class="TR1">			
	<Td class="TD1">	Network	</TD>
	<Td class="TD2">	SSID	</TD>
	<Td class="TD3">	<input type="text"  name="ssid" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Password	</TD>
	<Td class="TD3">	<input type="password"  name="password" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Encryption	</TD>
	<Td class="TD3">	<input list="encrypcion"  name="encrypcion" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Key nr	</TD>
	<Td class="TD3">	<input type="number" name="keynr" min="1" max="4" value="1" step="1" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	IPaddess	</TD>
	<Td class="TD3">	<input type="text"  name="IPaddess" value="192.168.1.xxx" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	DHCP	</TD>
	<Td class="TD3">	Yes: <INPUT type="radio" name="DHCP" value="1"> &nbsp &nbsp No: <INPUT type="radio" name="DHCP" value="0"> 	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>						
<tr class="TR1">			
	<Td class="TD1">	Serial	</TD>
	<Td class="TD2">	Port nr	</TD>
	<Td class="TD3">	<input type="number" name="sprt" min="1" max="4" value="1" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Baud rate	</TD>
	<Td class="TD3">	<input list="baudrate" name="baudrate">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Serial frame	</TD>
	<Td class="TD3">	<input list="sframe" name="sframe">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>						
<tr class="TR1">			
	<Td class="TD1">	Calendar	</TD>
	<Td class="TD2">	Time	</TD>
	<Td class="TD3">	<input type="text"  name="time" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Date	</TD>
	<Td class="TD3">	<input type="text"  name="date" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Alarm 1	</TD>
	<Td class="TD3">	<input type="text"  name="alarm1" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Alarm 2	</TD>
	<Td class="TD3">	<input type="text"  name="alarm2" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
			
<tr class="TR1">			
	<Td class="TD1">	MQTT	</TD>
	<Td class="TD2">	User	</TD>
	<Td class="TD3">	<input type="text"  name="user" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Pasword	</TD>
	<Td class="TD3">	<input type="password"  name="password" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Server	</TD>
	<Td class="TD3">	<input type="text"  name="server" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Port	</TD>
	<Td class="TD3">	<input type="number" name="mqttprt" min="1880" value="1883" step="1" placeholder=1883 onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Topic 1	</TD>
	<Td class="TD3">	<input type="text"  name="topic1" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">	Type	</TD>
	<Td class="TD5">	<input list="ttype" name="ttype">	</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Topic 2	</TD>
	<Td class="TD3">	<input type="text"  name="topic2" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">	Type	</TD>
	<Td class="TD5">	<input list="ttype" name="ttype">	</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Topic 3	</TD>
	<Td class="TD3">	<input type="text"  name="topic3" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">	Type	</TD>
	<Td class="TD5">	<input list="ttype" name="ttype">	</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
<tr class="TR1">			
	<Td class="TD1">		</TD>
	<Td class="TD2">	Topic 4	</TD>
	<Td class="TD3">	<input type="text"  name="topic4" onkeypress="if (event.keyCode == 13) { return false;}">	</TD>
	<Td class="TD4">	Type	</TD>
	<Td class="TD5">	<input list="ttype" name="ttype">	</TD>
	<Td class="TD5">		</TD>
	<Td class="TD5">		</TD>
</TR>			
			
</tbody>			
<tfoot>			
<tr class="FT1">			
	<td colspan="7">	EOT	</td>
</tr>			
</tfoot>			
</TABLE>			
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
</body>
</html>

重置大小是清除画布的一种（坏方法）（参见How to clear the canvas for redrawing），因此新绘制的矩形消失。

相关问题
最新问题