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函數，它可以正常工作！ 我很高興，從昨天開始我一直在為此奮斗。