<canvas id="canvas" width=800 height=500></canvas>
<script type="text/javascript">
function GED(ele){
return document.getElementById(ele);
}
canvas = GED('canvas');
ctx = canvas.getContext('2d');
var img = new Image();
img.src='nor1.png';
var canvasOffscreen = document.createElement('canvas');
canvasOffscreen.width = 500;
canvasOffscreen.height = 500;
function draw(){
ctx.clearRect(0,0,500,500);
if (img.complete){
ctx.drawImage(canvasOffscreen,0,0);
}else{
img.onload = function(){
canvasOffscreen.getContext('2d').drawImage(this,0,0,500,500,0,0,500,500);
ctx.drawImage(canvasOffscreen,0,0);
}
}
}
draw();
</script>
服务器用了,额,是火狐浏览器
--最新详细
火狐浏览器49 第一次打开第一次加载可以显示,没问题,然后刷新就再也不显示了!
PHP中文网2017-04-11 13:28:12
问题可能出在
canvasOffscreen.getContext('2d').drawImage(this,0,0,500,500,0,0,500,500);
改成
canvasOffscreen.getContext('2d').drawImage(this,0,0)
试试
大家讲道理2017-04-11 13:28:12
题主更新了问题详情,基本可以很清晰的知道,问题不在canvas上,而在于对于img上。img.complete
这个只读属性,返回一个 Boolean 如果浏览器已经取出图像则返回true。但是这里有点特殊。
因为刷新的时候缓存过这个图片,在还没执行到onload的事件监听之前就已经加载完了,就会一直为true,从而导致onload里面的那一串drawImage 到 canvasOffscreen 的代码段根本没执行。从而直接ctx.drawImage了一个空白的canvasOffscreen。
已经有前人碰到过了,上一个链接 http://www.jb51.net/article/2... (说实话我也不知道这原文章是哪儿来的,抱歉,不然定引用原文。)
大兄弟啊,你自己都说在部分浏览器才不能显示,你能不能把那个部分浏览器的名字版本说一下呢。刚好我碰到的浏览器都能显示,咋debug。。
但是这个问题的确引起了我的注意,我特意去看了drawImage的兼容性相关介绍。 http://caniuse.com/#search=dr... 上找不到,只找到了mdn文档中的零星描述,粘贴过来供大家看看,散发下思路。
https://developer.mozilla.org...
兼容性注解
在 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)中,支持通过给 sw 和 sh 赋负值,对图像进行翻转。
从 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 开始,drawImage() 按照规范处理负参数,沿着合适的轴翻转矩形。
从(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)开始,当drawImage()调用 null 或者 undefined 图像时,会抛出 TYPE_MISMATCH_ERR 异常。
在 Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)之前, 如果坐标值是非规定值或者是0,Firefox 会抛出一个异常。 按照规范描述,这种情况不会再发生。
Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)现在完全支持 CORS 跨域绘制图像,不需要污染的 canvas.
Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8) 现在允许 SVG 作为图像被绘制到 canvas ,不需要 污染的 canvas.