JavaScript中ImageData绘图缩放异常问题求助

你遇到的偏移问题核心原因是Canvas元素的实际绘图分辨率（width/height属性）和CSS设置的显示尺寸不一致。你现在只通过CSS给Canvas设置了width:800px; height:554px，但Canvas自身默认的绘图尺寸是300x150——当CSS把它拉伸到800x554时，鼠标事件的offsetX/offsetY是基于显示尺寸的，但你绘图时直接用这些值操作Canvas像素，就会出现坐标按比例偏移的情况，而且越往右下角偏移越严重。

解决方案步骤 #

1. 同步Canvas的绘图尺寸与显示尺寸 #

给Canvas元素添加width和height属性，让它的实际像素尺寸和CSS显示尺寸完全匹配：

<canvas id="myImageDisplayerCanvas" 
        width="800" height="554"
        onmousedown="startDrawing(event)" 
        onmousemove="moveDrawing(event)" 
        onmouseup="finishDrawing(event)" 
        style="width:800px; height:554px; top: 0; left: 0; position: absolute; z-index: 1; opacity: 1; background-color: black" />

注意：把style里的fill: black改成background-color: black，Canvas本身没有fill样式属性，之前的黑色是通过JS填充的，两种方式任选其一即可。

2. 优化喷漆函数的性能（可选但关键） #

你当前的spray函数每次循环都调用getImageData和putImageData，这会导致严重的性能卡顿，尤其是高频调用时。应该把这两个操作移到循环外面，只获取一次图像数据，修改完成后再一次性放回：

this.spray = function() {
    var centerX = parseInt(_center.offsetX),
        centerY = parseInt(_center.offsetY),
        i;
    // 只获取一次画布图像数据
    var imageData = drawingContext.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;
    for (i = 0; i < density; i++) {
        var offset = getRandomOffset();
        var x = centerX + Math.round(offset.x) - 1,
            y = centerY + Math.round(offset.y) - 1;
        // 边界检查，避免越界修改无效像素
        if (x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) continue;
        var pos = (y * canvas.width + x) * 4;
        data[pos] = 0;     // R通道
        data[pos+1] = 0;   // G通道
        data[pos+2] = 0;   // B通道
        data[pos+3] = 0;   // Alpha通道（设置为0即完全透明）
    }
    // 一次性放回修改后的图像数据
    drawingContext.putImageData(imageData, 0, 0);
};

3. 初始化时使用Canvas自身尺寸（增强可维护性） #

初始化填充黑色时，改用Canvas的width和height属性代替硬编码的数值，后续如果修改画布尺寸，代码不需要同步改动：

$(document).ready(function() {
    canvas = document.getElementById("myImageDisplayerCanvas");
    drawingContext = canvas.getContext("2d");
    drawingContext.fillStyle = "#000000";
    drawingContext.fillRect(0, 0, canvas.width, canvas.height);
});

4. 修正角度单位（细节优化） #

getRandomOffset里的Math.cos和Math.sin默认接受弧度而非角度，之前用360度计算会导致偏移逻辑不规范，修正为：

function getRandomOffset() {
    var randomAngle = Math.random() * 2 * Math.PI; // 改用弧度计算
    var randomRadius = Math.random() * radius;
    return {
        x: Math.cos(randomAngle) * randomRadius,
        y: Math.sin(randomAngle) * randomRadius
    };
}

完整修改后的代码 #

整合所有修改后的完整代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="myImageDisplayerDiv" style="position:relative; width:800px; height:554px">
    <img src="~/images/RedLarch.jpg" style="width:800px; height:554px; top: 0; left: 0; position: absolute; z-index: 0" />
    <canvas id="myImageDisplayerCanvas" 
            width="800" height="554"
            onmousedown="startDrawing(event)" 
            onmousemove="moveDrawing(event)" 
            onmouseup="finishDrawing(event)" 
            style="width:800px; height:554px; top: 0; left: 0; position: absolute; z-index: 1; opacity: 1; background-color: black" />
</div>

<script>
// On document ready function.
$(document).ready(function() {
    canvas = document.getElementById("myImageDisplayerCanvas");
    drawingContext = canvas.getContext("2d");
    drawingContext.fillStyle = "#000000";
    drawingContext.fillRect(0, 0, canvas.width, canvas.height);
});
// Spray paint logic.
var _intervalId, // used to track the current interval ID
    _center, // the current center to spray
    density = 10,
    radius = 10,
    drawingCxt,
    leftClickPressed,
    drawingContext,
    canvas;
function getRandomOffset() {
    var randomAngle = Math.random() * 2 * Math.PI;
    var randomRadius = Math.random() * radius;
    return {
        x: Math.cos(randomAngle) * randomRadius,
        y: Math.sin(randomAngle) * randomRadius
    };
}
this.startDrawing = function(position) {
    _center = position;
    leftClickPressed = true;
    _intervalId = setInterval(this.spray, 10);
};
this.moveDrawing = function(position) {
    if (leftClickPressed) {
        clearInterval(_intervalId);
        _center = position;
        _intervalId = setInterval(this.spray, 10);
    }
}
this.finishDrawing = function(position) {
    clearInterval(_intervalId);
    leftClickPressed = false;
};
this.spray = function() {
    var centerX = parseInt(_center.offsetX),
        centerY = parseInt(_center.offsetY),
        i;
    var imageData = drawingContext.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;
    for (i = 0; i < density; i++) {
        var offset = getRandomOffset();
        var x = centerX + Math.round(offset.x) - 1,
            y = centerY + Math.round(offset.y) - 1;
        if (x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) {
            continue;
        }
        var pos = (y * canvas.width + x) * 4;
        data[pos] = 0;
        data[pos+1] = 0;
        data[pos+2] = 0;
        data[pos+3] = 0;
    }
    drawingContext.putImageData(imageData, 0, 0);
};
</script>

修改完成后，鼠标点击的位置和喷漆透明的区域就会完全对应，不会再出现偏移问题了。

内容的提问来源于stack exchange，提问作者m4gik