Javascript HTML5画布如何缩放图像按钮的context.getImageData

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

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

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;
}

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

在我开始缩放整个画布之前，效果很好。

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

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;
}

function scale（）{
变量标度={}；
scale.x=window.innerWidth/this.canvas.width；
scale.y=window.innerHeight/this.canvas.height；
var ratio=scale.x您正在使用CSS缩放画布。当您这样做时，实际上并不影响画布本身，您只是影响其在网站DOM中的表示。在大多数情况下，不建议使用CSS缩放画布，因为它不会更改内部绘图分辨率，这意味着画布将被八字模糊。但这也会导致一个画布像素不再等同于一个屏幕像素

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

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


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

我会推荐第二种解决方案，因为它看起来也会好得多。
我想我终于成功了。@Philipp谢谢你为右边的相关列提供了方向和堆栈溢出。我找到了那篇文章，我重写了一点粘贴的调整大小功能，它成功了！我很高兴，我一直在与那篇文章作斗争om昨天发布。
不太清楚您试图通过缩放实现什么，但您是否考虑过使用ctx.scale（x，y）要缩放整个画布坐标系，而不是手动缩放？我正在尝试在画布上有一个具有适当hitArea的按钮。因此，如果我缩小画布，按钮也会缩小，但是鼠标捕捉事件的按钮区域保持不变。看起来源画布没有被缩放，这是正确的因为我缩放了主要的一个。是的，我尝试了ctx。缩放（比率，比率）；在源和/或主画布上，但这并不能解决问题。我正在附加图像以可视化问题@Philipp我编辑了主帖子。我按照您的建议更改了主画布的大小。当我缩放主画布上下文时，问题仍然存在。我想我应该缩放源画布，因为我希望有一个更小的按钮区域，但当我这样做时，图像是不可见的。只是想让你知道，从一开始放置按钮的x，y坐标是好的，只是尺寸是个问题。
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;
}

 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);
    }