HTML5 canvas如何缩放图片按钮的context.getImageData

Question

缩小画布后，context.getImageData（）出现问题。 我已将画布添加到HTML页面：

 <canvas id="canvas" width="960" height="620"></canvas> 

我在画布上绘制的图像就像按钮一样。 我正在测试Alpha通道，以了解鼠标是否位于按钮上方：

 var mx = (e) ? (e.offsetX || e.layerX) : 0; var my = (e) ? (e.offsetY || e.layerY) : 0; var cx = mx - (btn.x * this.ratio - 2; var cy = my - btn.y * this.ratio - 2; var pixels = btn.getContext().getImageData(cx, cy, 1, 1); for (var j : number = 3; j < pixels.data.length; j += 4) { if((pixels.data[j])!=0 && e) { console.log('mouse over'); } } 

该按钮是从大图片中切出并预先渲染的：

 var btn = createCanvas("img.png", 0, 0, 100, 100); function createCanvas(img, sx , sy , w , h ) { var canvas = document.createElement("canvas"); canvas.width = w; canvas.height = h; var ctx = canvas.getContext("2d"); ctx.drawImage(img, sx, sy, w, h, 0, 0, w, h); return canvas; } 

之后，将切片的按钮/图像添加到主画布。

 this.context.drawImage(btn, 0,0, btn.width, btn.height, 100, 100, btn.width, btn.height); 

在我开始缩放整个画布之前，它工作正常。

 function scale() { var scale = {}; scale.x = window.innerWidth / this.canvas.width; scale.y = window.innerHeight / this.canvas.height; var ratio = scale.x <= scale.y ? scale.x : scale.y; } 

当我按比例缩小画布后，按钮的点击/覆盖区域大于按钮/图像本身。 看起来它尚未缩放，并采用了原始的宽度和高度。 但是，图形将根据画布比例进行缩放。 我尝试将宽度和高度乘以比例，但是它缩放了按钮的图像，但是鼠标做出反应的区域仍然大于按钮。 为了解决该问题，我应该在代码中进行哪些更改？

ps我为我的英语道歉。 :)

编辑

我用来缩放画布的功能

 window.addEventListener('resize', resize, false);
 window.addEventListener('orientationchange', resize, false); 
 var canvas = $('#canvas');
 var ratio = 1;
 var originalCanvasW = 800;
 var originalCanvasH = 600
 function resize(e)
    {
        var scale = {x: 1, y: 1};
        var s : string = '';
        scale.x = window.innerWidth  /  canvas.width;
        scale.y = window.innerHeight /  canvas.height;

        ratio =  scale.x <= scale.y ? scale.x : scale.y;
        ratio = (ratio > 1) ? 1 : ratio;

        canvas.css('width',originalCanvasW*ratio);
        canvas.css('height',originalCanvasH*ratio);
    }

Answer 1

您正在使用CSS缩放画布。 当您这样做时，实际上并没有影响画布本身，而只是影响了画布在网站DOM中的表示形式。 在大多数情况下，不建议使用CSS缩放画布，因为它不会更改内部绘图分辨率，这意味着画布将显示模糊。 但这也导致一个画布像素不再等于一个屏幕像素。

context.getImageData坐标仍然使用内部分辨率（ width="960" height="620 ），而您使用的鼠标坐标是在嵌入画布的网页的坐标系中测量的。

要解决此问题，有两种可能性：

• 当您将屏幕像素坐标（从鼠标事件）转换为画布像素坐标（用于调用上下文函数）时，请考虑当前缩放因子。
• 不要通过CSS缩放画布。 直接更改canvas.width和canvas.height并相应地调整context.scale ，以使960px仍然是画布的整个宽度。

我建议第二种解决方案，因为它看起来也可能会好得多。

Answer 2

我想我终于做到了。 @Philipp感谢您的指导和右边“相关”列的堆栈溢出。 我发现该帖子stackoverflow.com/questions/14544260/重写了一些resize函数，它可以正常工作！ 我很高兴，从昨天开始我一直在为此奋斗。