Canvas的缩放比例

2016-11-24

需求说明

需要将一个大小不定的 cavas 画板缩放成一个标准的画布大小。随着浏览器的resize而变换。

index.html

我们创建一个 canvas 对象，在 dom 结构中, 假设我们需要缩放的 canvas 大小是 1024*640

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <canvas id="target" width="1024" height="640"></canvas>
    </body>
</html>

样式

因为我们需要canvas自适应，所以在 css 里面设置它的宽高都为 100%.

<style>
#target {
    width: 100%;
    height: 100%;
}
</style>

javascript 操作

<script>
window.onload = () => {
    let canvas = document.getElementById('target');
    let context = canvas.getContext('2d');
    // 给 canvas 加上鼠标事件
    let drawing = false;
    context.lineWidth = 3;
    context.strokeStyle = 'red';
    canvas.addEventListener('mousedown', (e) => {
        context.beginPath();
        context.moveTo(e.offsetX, e.offsetY);
        drawing = true;
    });
    canvas.addEventListener('mousemove', (e) => {
        if (drawing) {
            context.lineTo(e.offsetX, e.offsetY);
            context.stroke();
        }
    });
    canvas.addEventListener('mouseup', (e) => {
        if (drawing) {
            context.lineTo(e.offsetX, e.offsetY);
            context.stroke();
            drawing = false;
        }
    });
};
</script>

加上如上代码，我们的 canvas 就可以运行了，来测试一番吧。

BUG

很遗憾，当我屏幕的大小只有1024 * 640 时，我们的鼠标才能够和画布上面的点对应上。

原因

因为我们强制要求画布的大小是 1024 * 640，但是实际上画布的大小是大于或小于要求的大小的。
由于我们的大小不一致，于是canvas 自动执行了 scale方法，也就是 canvas 的缩放功能。
所以导致了我们的鼠标点击后显示的位置是缩放之后的位置。

解决

根据以上我们分析出的原因，我们只需要计算出当前画布与标准画布直接的比例。然后将鼠标的点击位置，按对应的比例换算，那么久不会导致鼠标点与位置的不统一。

代码

window.onload = () => {
    let canvas = document.getElementById('target');
    let context = canvas.getContext('2d');
    // 给 canvas 加上鼠标事件
    let drawing = false;
    let ratio = canvas.width / canvas.clientWidth;
    let currentRatio = 1 / ratio;;
    context.lineWidth = 3;
    context.strokeStyle = 'red';
    canvas.addEventListener('mousedown', (e) => {
        context.beginPath();
        context.moveTo(e.offsetX / currentRatio, e.offsetY / currentRatio);
        drawing = true;
    });
    canvas.addEventListener('mousemove', (e) => {
        if (drawing) {
            context.lineTo(e.offsetX / currentRatio, e.offsetY / currentRatio);
            context.stroke();
        }
    });
    canvas.addEventListener('mouseup', (e) => {
        if (drawing) {
            context.lineTo(e.offsetX / currentRatio, e.offsetY / currentRatio);
            context.stroke();
            drawing = false;
        }
    });
};

不难看出上面的代码，我们计算标准尺寸/当前尺寸的比例。然后，将点进行反比缩放，然后将点绘制出来，就达到了点和画布的对应。

改进

实时更改画布大小

我们为了实时更改画布大小，在这里我们选择监听 resize 事件. 所以我们只需要实时更改当前的比例系数即可。

window.onload = () => {
    let canvas = document.getElementById('target');
    let context = canvas.getContext('2d');
    // 给 canvas 加上鼠标事件
    let drawing = false;
    let ratio = canvas.width / canvas.clientWidth;
    let currentRatio = 1 / ratio;
    window.onresize = () => {
        ratio = canvas.width / canvas.clientWidth;
        currentRatio = 1 / ratio;
    };
    context.lineWidth = 3;
    context.strokeStyle = 'red';
    canvas.addEventListener('mousedown', (e) => {
        context.beginPath();
        context.moveTo(e.offsetX / currentRatio, e.offsetY / currentRatio);
        drawing = true;
    });
    canvas.addEventListener('mousemove', (e) => {
        if (drawing) {
            context.lineTo(e.offsetX / currentRatio, e.offsetY / currentRatio);
            context.stroke();
        }
    });
    canvas.addEventListener('mouseup', (e) => {
        if (drawing) {
            context.lineTo(e.offsetX / currentRatio, e.offsetY / currentRatio);
            context.stroke();
            drawing = false;
        }
    });
};

:: 重点在 window.onresize 事件.

总结

我们的目标是将不通的画布大小，转换成标准大小。
在画图的时候，因为比例不对，我们只需将点按比例缩放即可。

查看 Demo 请点击这里