构建一个网页,在该网页上我试图将图像设置为主画布的背景。实际的图像是1600x805,我正在尝试对应用程序进行编码,以便它可以根据用户屏幕的尺寸向上或向下缩放图像。在中,Prime.js
我有一个对象,用于设置应用程序canvas元素的属性index.html
。这是该对象的代码:
function Prime(w,h){
if(!(function(){
return Modernizr.canvas;
})){ alert('Error'); return false; };
this.context = null;
this.self = this;
this.globalCanvasMain.w = w;
this.globalCanvasMain.h = h;
this.globalCanvasMain.set(this.self);
this.background.setBg();
}
Prime.prototype = {
constructor: Prime,
self: this,
globalCanvasMain: {
x: 0,
y: 0,
set: function(ref){
ref.context = document.getElementById('mainCanvas').getContext('2d');
$("#mainCanvas").parent().css('position', 'relative');
$("#mainCanvas").css({left: this.x, top: this.y, position: 'absolute'});
$("#mainCanvas").width(this.w).height(this.h);
}
},
background: {
bg: null,
setBg: function(){
this.bg = new Image();
this.bg.src = 'res/background.jpg';
}
},
drawAll: function(){
this.context.drawImage(this.background.bg, 0,0, this.background.bg.width,this.background.bg.height,
this.globalCanvasMain.x,this.globalCanvasMain.y, this.globalCanvasMain.w,this.globalCanvasMain.h);
}
};
这样的外部对象与之交互的主要接口index.html
是home.js
。这里是发生了什么:
$(document).ready(function(){
var prime = new Prime(window.innerWidth,window.innerHeight);
setInterval(prime.drawAll(), 25);
});
出于某种原因,我对上下文的drawImage函数的调用仅裁剪了图像的左上角,并将其缩放到用户屏幕的大小。为什么我看不到图像的其余部分?
问题在于,在调用setInterval时,图像可能尚未完成加载。如果图像未正确加载和解码,则drawImage将中止其操作:
如果图像尚未完全解码,则不会绘制任何图像
尝试绘制图像之前,需要确保已加载图像。使用图像的onload
处理程序执行此操作。此操作是异步的,因此这意味着您还需要处理回调(或Promise):
在后台对象中,您需要为图像加载提供回调,例如:
...
background: {
bg: null,
setBg: function(callback) {
this.bg = new Image();
this.bg.onload = callback; // supply onload handler before src
this.bg.src = 'res/background.jpg';
}
},
...
现在,设置背景后,等待回调,然后继续drawAll()(尽管,您似乎从未设置过背景,这意味着drawImage尝试绘制null
):
$(document).ready(function(){
var prime = new Prime(window.innerWidth, window.innerHeight);
// supply a callback function reference:
prime.background.setBg(callbackImageSet);
// image has loaded, now you can draw the background:
function callbackImageSet() {
setInterval(function() {
prime.drawAll();
}, 25);
};
如果要绘制缩放为适合画布的完整图像,则可以简化调用,只需提供新的尺寸即可(并且似乎未定义this.globalCanvasMain.x / y?):
drawAll: function(){
this.context.drawImage(this.background.bg, 0,0,
this.globalCanvasMain.w,
this.globalCanvasMain.h);
}
我建议您使用requestAnimationFrame
绘制图像,因为这将与监视器更新同步。
还要记住为图像对象上的onerror
/提供回调onabort
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句