图片未绘制在“;重新加载页面”;

Picture not drawn on "reload page"

本文关键字：加载 绘制 新加载      更新时间：2024-04-15

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

<!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>

这在我尝试过的几种浏览器上都能很好地工作，只有一个例外：

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

这只是Safari4中的一个错误，我必须接受它，还是我的代码有问题？至少在尝试了另外两种浏览器（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

}

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

相关文章：