Dav*_*ord 3 javascript html5 canvas
有没有办法强制画布更新？我想显示加载消息,但游戏会在显示之前锁定加载.在调用加载函数之前,我觉得我需要告诉画布"现在画画",但也许有另一种方式......
编辑:
好吧,为了清楚我已经写了一个非常小的脏脚本(我可以在我的茶歇中做到最好:P)来展示我想要过来的东西.这里:
<html>
<head>
<title>test page</title>
</head>
<body onload="init();">
<canvas id="cnv" width="300" height="300">
canvas not supported.<br/>
</canvas>
</body>
</html>
<script type="text/javascript">
var ctx;
function init()
{
var canvas = document.getElementById('cnv');
ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect(0,0,300,300);
FakeLoad();
ctx.fillStyle = "rgb(0, 255, 0)";
ctx.fillRect(0,0,300,300);
}
function FakeLoad()
{
var d = new Date();
var start = d.getTime();
while (new Date().getTime() - start < 5000)
{
//emulate 5 secs of loading time
}
}
</script>
现在的想法是脚本应绘制一个红色方块,以显示其"加载"和一个绿色方块完成后.但是如果你将它复制到一个html文件中,你会看到暂停5秒然后绿色出现,从不出现红色.在我脑海里,我想要一些像ctx.Refresh(); 我画绿色方块后告诉它"现在更新!不要等!" 但从回答来看,这不是解决问题的方法.
我该怎么办？:)
在执行较长任务之前允许画布显示的另一件事是在短暂超时后开始FakeLoad:
var canvas = document.getElementById('cnv');
ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect(0,0,300,300);
setTimeout(function() {
FakeLoad();
ctx.fillStyle = "rgb(0, 255, 0)";
ctx.fillRect(0,0,300,300);
}, 20); // 20 ms - should be enough to draw something simple