87,991
社区成员
发帖
与我相关
我的任务
分享图像为什么刷新一下才能显示？启动时是空白页，这是怎么回事？
弄了很久才用<canvas>标签显示出图像来，可是启动浏览器之后必须刷新一下才能看到图像，不然就是空白的什么都没有。
哪里的问题。。。。。。
[html文件]
<!DOCTYPE html>
<html>
<head><title>javascript</title>
<script type="text/javascript" src="xxxx.js"></script>
<meta http-quive="Pragma" content="no-cache">
<meta http-quive="Cache-Control" content="no-cache">
</head>
<body onload="draw();">
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>
[javascript文件]
function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var img=new Image();
img.src="0001.png";
context.drawImage(img,50,50);
}
哪里的问题。。。。。。
[html文件]
<!DOCTYPE html>
<html>
<head><title>javascript</title>
<script type="text/javascript" src="xxxx.js"></script>
<meta http-quive="Pragma" content="no-cache">
<meta http-quive="Cache-Control" content="no-cache">
</head>
<body onload="draw();">
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>
[javascript文件]
function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var img=new Image();
img.src="0001.png";
context.drawImage(img,50,50);
}
...全文
请发表友善的回复…
发表回复
dadedu 2012-05-18
- 打赏
- 举报
[Quote=引用 1 楼 的回复:]
HTML code
<!DOCTYPE html>
<html>
<head><title>javascript</title>
<script>
function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var img = new Image();
i……
[/Quote]
谢谢，这下知道了。。。。。。
HTML code
<!DOCTYPE html>
<html>
<head><title>javascript</title>
<script>
function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var img = new Image();
i……
[/Quote]
谢谢，这下知道了。。。。。。
001007009 2012-05-18
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head><title>javascript</title>
<script>
function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var img = new Image();
img.src="http://avatar.profile.csdn.net/2/4/4/2_dadedu.jpg";
img.onload = function(){
context.drawImage(img,50,50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>
img.src="http://avatar.profile.csdn.net/2/4/4/2_dadedu.jpg";
context.drawImage(img,50,50);
如果直接这样写，img仅请求了http这个连接
而马上就drawImage了，这时候image可能还没加载完毕，所以不显示
而刷新一下（非强制刷新）就显示出来，是因为 这是读取的缓存。
所以等image.onload 再drawImage
vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！
