我正在 Canvas 的背景上绘制图像。该图像每秒刷新一次，但 Canvas 需要更频繁地重绘，每 0.5 秒一次。我似乎遇到的问题是 Safari 在更新 Canvas 时会闪烁，因为它似乎丢失了 bgImg 变量中的图像数据。 Firefox 按预期工作，不会出现闪烁。
有人知道如何避免这种情况吗？我是否遗漏了一些非常明显的东西？
要测试此代码，只需将下面的整个代码粘贴到 html 文件中并使用浏览器加载即可。它应该做的是:
- 创建 Canvas
- 每秒加载一张图像
- 每 500 毫秒重新绘制一次 Canvas ，使用图像作为背景。
代码如下:
<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>
最佳答案
您的问题是您在加载时绘制bgImg。 Webkit在加载新图像时不会缓存旧图像数据；一旦设置了新的 .src，它就会删除图像。
您可以通过使用两个图像来解决此问题，在加载下一个图像时使用最后一个有效加载的图像进行绘制。
我在网上放了一个例子:http://jsfiddle.net/3XW8q/2/
为 Stack Overflow 后代进行简化:
var 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);
}
关于javascript - 反复绘制更新图像到 Canvas (Safari 在加载期间清空图像)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10073890/