Javascript 未绘制在“图纸”上的图片；“重新加载页面”；_Javascript_Html5 Canvas_Reload

Javascript 未绘制在“图纸”上的图片；“重新加载页面”；

javascript html5-canvas

Javascript 未绘制在“图纸”上的图片；“重新加载页面”；,javascript,html5-canvas,reload,Javascript,Html5 Canvas,Reload,此代码在画布中显示图片： <!DOCTYPE html> <html><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"><title>canpic</title> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"><META HTTP-EQUIV="Expires" CO

此代码在画布中显示图片：

<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"><title>canpic</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"><META HTTP-EQUIV="Expires" CONTENT="-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<style>
  canvas { border: 42px solid green; }
</style>
</head><body>
CANVAS PICTURE TEST
<br>
<canvas id="pinaka" width="600" height="370">
No HTML5 in this browser!
</canvas>
<br>
<p id="message"></p>
<script>
var can; // Canvas
var ctx; // Canvas context
var backimage=new Image();
function test1() {
  can=document.getElementById("pinaka");
  ctx=can.getContext('2d');
  backimage.src="images/p1.jpg";
  alert('drawing');
  ctx.drawImage(backimage,0,0);
}
$(document).ready(function() { test1(); })
</script>
</body></html>


坎皮克
画布{边框：42px纯绿色；}
帆布图片测试


此浏览器中没有HTML5！



变量can；//帆布
var ctx；//画布上下文
var backimage=新图像（）；
函数test1（）{
can=document.getElementById（“pinaka”）；
ctx=can.getContext（'2d'）；
backimage.src=“images/p1.jpg”；
警报（“图纸”）；
ctx.drawImage（backimage，0,0）；
}
$（document）.ready（函数（）{test1（）；}）

这在我尝试过的几种浏览器上运行良好，但有一个例外：

当我第一次在Safari 4上加载此页面时，图片绘制得很好，但当我重新加载页面（Apple-R键）时，仅绘制画布边框，但画布内部保持空白。错误控制台中也没有显示错误。我可以验证我的函数test1（）在重新加载后是否被调用，因为会显示警报框

这只是Safari4中的一个bug，我必须接受，还是我的代码有问题？至少在另外两种浏览器（Camino和SeaMonkey）试用后，代码运行良好

我用以下方式修改了我的函数：

function test1() {
  can=document.getElementById("pinaka");
  ctx=can.getContext('2d');
  backimage.onload = function() {
      ctx.drawImage(backimage,0,0);
  }
  backimage.src="images/p1.jpg"; // triggers loading the picture

}

现在它起作用了（因为可以确保在绘图开始之前加载图片。

请参见：@Gustavo Carvalho:这篇帖子建议使用onload函数进行绘图。我尝试了这一方法，但其行为甚至比我的原始代码更糟糕，因为现在图片不再显示，不仅在Safari中，而且在其他浏览器中也不会显示。我将“我会把我修改过的版本放在原来的帖子里，这样你就可以看到我是怎么做的了。”@GustavoCarvalho：对不起，我的错误。事实上，它现在和你指出的解决方案一起工作了！非常感谢。顺便问一句，Stackoverflow将问题标记为已回答的最好方式是什么？我也想展示我修改过的代码，但如果我理解正确的话。”诚然，这不应该通过编辑我的原始帖子来完成。不客气！你回答了你自己的问题，做得对。记住以后接受它（我认为在你能够做到这一点之前有一个延迟）。无论如何，你也可以对SÓ上任何其他有用的问题或答案投赞成票。这样，好的帖子可以在SO上获得更好的可见性，并可能在将来帮助其他人。