Javascript 反复绘制并将图像更新到画布（Safari在加载过程中清空图像）
我正在画布的背景上画一幅图像。此图像每秒钟刷新一次，但画布需要每隔0.5秒重新绘制一次。我似乎遇到的问题是，Safari在更新画布时闪烁，因为它似乎丢失了来自bgImg变量的图像数据。Firefox按预期工作，不会出现闪烁 有人知道如何避免这种情况吗？我是不是错过了一些很明显的东西 要测试这段代码，只需将下面的整个代码粘贴到html文件中，然后用浏览器加载即可。它应该做的是：Javascript 反复绘制并将图像更新到画布（Safari在加载过程中清空图像）,javascript,canvas,safari,Javascript,Canvas,Safari,我正在画布的背景上画一幅图像。此图像每秒钟刷新一次，但画布需要每隔0.5秒重新绘制一次。我似乎遇到的问题是，Safari在更新画布时闪烁，因为它似乎丢失了来自bgImg变量的图像数据。Firefox按预期工作，不会出现闪烁 有人知道如何避免这种情况吗？我是不是错过了一些很明显的东西 要测试这段代码，只需将下面的整个代码粘贴到html文件中，然后用浏览器加载即可。它应该做的是： 创建画布 每秒加载一个图像 使用图像作为背景，每隔500毫秒重新绘制画布 代码如下： <html> &l
- 创建画布
- 每秒加载一个图像
- 使用图像作为背景，每隔500毫秒重新绘制画布
<html>
<head>
<script type="text/javascript">
var bgImg = new Image();
var firstload = false;
var cv;
var ctx;
var updateBackground = function() {
bgImg.onload = function() {
firstload = true;
console.log("image loaded. Dimensions are " + bgImg.width + "x" + bgImg.height);
}
bgImg.src = "http://mopra-ops.atnf.csiro.au/TOAD/temp.php?" + Math.random() * 10000000;
setTimeout(updateBackground, 1000);
}
var initGraphics = function() {
cv = document.getElementById("canvas");
ctx = cv.getContext("2d");
cv.width = cv.clientWidth;
cv.height = cv.clientHeight;
cv.top = 0;
cv.left = 0;
}
var drawStuff = function() {
console.log("Draw called. firstload = " + firstload );
ctx.clearRect(0, 0, cv.width, cv.height);
if ( firstload == true) {
console.log("Drawing image. Dimensions are " + bgImg.width + "x" + bgImg.height);
try {
ctx.drawImage(bgImg, 0, 0);
} catch(err) {
console.log('Oops! Something bad happened: ' + err);
}
}
setTimeout(drawStuff, 500);
}
window.onload = function() {
initGraphics();
setTimeout(updateBackground, 1000);
setTimeout(drawStuff, 500);
}
</script>
<style>
body {
background: #000000;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #cccccc;
}
.maindisplay {
position:absolute;
top: 3%;
left: 1%;
height: 96%;
width: 96%;
text-align: left;
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<div id="myspan" style="width: 50%">
<canvas id="canvas" class="maindisplay"></canvas>
</div>
</body>
</html>
var bgImg=新图像（）；
var firstload=false；
var-cv；
var-ctx；
var updateBackground=函数（）{
bgImg.onload=函数（）{
firstload=true；
console.log（“图像加载。尺寸为“+bgImg.width+“x”+bgImg.height”）；
}
bgImg.src=”http://mopra-ops.atnf.csiro.au/TOAD/temp.php?“+Math.random（）*10000000；
设置超时（updateBackground，1000）；
}
var initGraphics=function（）{
cv=document.getElementById（“画布”）；
ctx=cv.getContext（“2d”）；
cv.width=cv.clientWidth；
cv.height=cv.clientHeight；
cv.top=0；
cv.left=0；
}
var drawStuff=function（）{
console.log（“Draw called.firstload=“+firstload”）；
ctx.clearRect（0，0，cv.width，cv.height）；
if（firstload==true）{
控制台日志（“图纸图像。尺寸为“+bgImg.width+“x”+bgImg.height”）；
试一试{
ctx.drawImage（bgimg0,0）；
}捕捉（错误）{
log（'Oops！发生了不好的事情：'+err）；
}
}
设置超时（drawStuff，500）；
}
window.onload=函数（）{
initGraphics（）；
设置超时（updateBackground，1000）；
设置超时（drawStuff，500）；
}
身体{
背景：#000000；
字体系列：Verdana、Arial、无衬线字体；
字体大小：10px；
颜色：#中交；
}
.主显示器{
位置：绝对位置；
最高：3%；
左：1%；
身高：96%；
宽度：96%；
文本对齐：左对齐；
边框：1px实心#中交；
}
.srcvar imgs=[new Image,new Image], validImage, imgIndex=0;
function initGraphics() {
// Whenever an image loads, record it as the latest-valid image for drawing
imgs[0].onload = imgs[1].onload = function(){ validImage = this; };
}
function loadNewImage(){
// When it's time to load a new image, pick one you didn't last use
var nextImage = imgs[imgIndex++ % imgs.length];
nextImage.src = "..."+Math.random();
setTimeout(loadNewImage, 2000);
}
function updateCanvas(){
if (validImage){ // Wait for the first valid image to load
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(validImage, 0, 0);
}
setTimeout(updateCanvas, 500);
}
请注意，您的
setTimeout（）setTimeout（drawStuff）