Question

此代码在Canvas中显示图片：

<!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（）是否在重新加载后被调用，因为警告框出现了。

这只是Safari 4中的一个错误，我必须接受，或者我的代码有问题吗？至少有两个其他浏览器尝试过（Camino和SeaMonkey），代码效果很好。

Answer 1

我通过以下方式修改了我的功能：

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

}

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

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

1 个答案: