我正在绘制一个大的画布图像作为背景,图像比窗口大小大。我想知道是否有一种方法让我将图像居中以适应全屏。如果是这样,怎么样?这就是我正在做的事情:
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawStuff();
}
resizeCanvas();
function drawStuff() {
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = '/resources/img/bg.png';
}
答案 0 :(得分:4)
这是一种可选择的方法,可以将图像居中到不使用变换的画布(另请参阅下面的注释):
imageObj.onload = function() {
var x = (canvas.width - this.width ) * 0.5, // this = image loaded
y = (canvas.height - this.height) * 0.5;
ctx.drawImage(this, x, y);
};
由于图像大于画布x,在这种情况下y将为负,这非常好。如果图像较小,它也可以正常工作。如果您在加载处理程序之外进行绘图,则当然需要使用imageObj
而不是this
。
注意:设置调整大小处理程序的方式不是处理图像重新定位的最佳方法 - 您应该只加载一次图像,然后重复使用该对象。由于调整大小通常会创建许多事件,因此会触发相同数量的图像重新加载。
为了使其正常工作,你可以这样做:
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
imageObj = new Image(); // declare globally
imageObj.onload = function() {
// now set up handler when image is actually loaded
// - else drawImage will fail (width, height is not available and no data)
window.addEventListener('resize', resizeCanvas, false);
// initial call to draw image first time
resizeCanvas();
};
imageObj.src = '/resources/img/bg.png';
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawStuff();
}
function drawStuff() {
var x = (canvas.width - imageObj.width ) * 0.5,
y = (canvas.height - imageObj.height) * 0.5;
ctx.drawImage(imageObj, x, y);
}
它并不完美,因为调整大小事件队列仍然很大并且可能会滞后 - 也有解决方案,例如this one(稍作修改)。
答案 1 :(得分:2)
以下是如何将图像置于画布中心。任何垂直或水平溢出都将在画布外:
imageObj.onload = function() {
ctx.translate(canvas.width/2,canvas.height/2);
ctx.drawImage(imageObj,-imageObj.width/2,-imageObj.height/2);
ctx.translate(-canvas.width/2,-canvas.height/2);
};
祝你的项目好运!
答案 2 :(得分:0)
如果您要在上传后添加图片,则可以使用它,它对我有用:) var image_center_width =(canvas.width-img.width)/ 2; var image_center_height =(canvas.height-img.height)/ 2;
img.set({
left : image_center_width,
top : image_center_height,
});
canvas.add(img)