在背景缩放上绘制HTML5画布

您需要一种在另一个画布中或通过存储坐标来存储用户图形的方法。

我建议您存储坐标，下面是一些代码，这些代码将在数组中存储行，每行都是一个坐标数组，例如：[x0，y0，x1，y1，x2，y2，...]。

编辑：现在我简化了事情，坐标相对于画布的中心存储。看到小提琴，它大部分都在工作。

小提琴：http : //jsfiddle.net/gamealchemist/74MCQ/4/

     function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        var x = evt.clientX - rect.left;
        var y = evt.clientY - rect.top;
        var sx = (x-cw/2)/scale;
        var sy = (y-ch/2)/scale;
        return {
            x: x,
            y: y,            
            sx : sx,
            sy:sy
        };
    }

    /****** PAINT ******/
    var isDrawing = false;
    var color = "#000000";
    var brushWidth = 10;
    //var previousEvent = false;
    ctx.strokeStyle = '#000000';

    var currentLine = null;
    var allLines = [];


    $("#canvas").mousedown(function (e) {
        var mousePos = getMousePos(canvas, e);
        ctx.moveTo(mousePos.x, mousePos.y);
        isDrawing = true;
        if (currentLine) allLines.push(currentLine);
        currentLine = [];
        currentLine.push(mousePos.sx, mousePos.sy);
    });

    $("#canvas").mouseup(function () {
        isDrawing = false;
        if (currentLine) allLines.push(currentLine);
        currentLine = null;
    });

    $("#canvas").mouseout(function () {
        isDrawing = false;
        if (currentLine) allLines.push(currentLine);
        currentLine = null;
    });

    $("#canvas").mousemove(function (e) {

        if (isDrawing === true) {
            var mousePos = getMousePos(canvas, e);
            currentLine.push(mousePos.sx, mousePos.sy);

            //paint tools, effects
            ctx.lineWidth = 10;
            ctx.strokeStyle = color;
            ctx.shadowBlur = 1;
            ctx.shadowColor = 'rgb(0, 0, 0)';
            ctx.lineTo(mousePos.x, mousePos.y);
            ctx.stroke();
        }
    });

    function drawStoredLines() {
        var thisLine;
        for (var i = 0; i < allLines.length; i++) {
            thisLine = allLines[i];
            drawLine(thisLine);
        }
    }

    function drawLine(ptArray) {
        if (ptArray.length <= 2) return;
        ctx.beginPath();
        ctx.moveTo(ptArray[0], ptArray[1]);
        for (var p = 2; p < ptArray.length; p += 2) {
            ctx.lineTo(ptArray[p], ptArray[p + 1]);
        }
        ctx.lineWidth = 10;
        ctx.strokeStyle = color;
        ctx.shadowBlur = 1;
        ctx.shadowColor = 'rgb(0, 0, 0)';
        ctx.stroke();
    }

请注意，我无法抗拒减少您的175行代码以选择比例尺到25行一个:-)

    var zoomSteps = [0.1, 0.2, 0.4, 0.6, 0.8, 1.0, 1.5, 2.0, 3.0, 4.0];
    var zoomIndex = zoomSteps.indexOf(1);

    function doScroll(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        zoomIndex = zoomIndex + delta;
        if (zoomIndex < 0) zoomIndex = 0;
        if (zoomIndex >= zoomSteps.length) zoomIndex = zoomSteps.length - 1;
        scale = zoomSteps[zoomIndex];
        imageWidthZoomed = imageWidth * scale;
        imageHeightZoomed = imageHeight * scale;

        var mousePos = getMousePos(canvas, e);

        draw(mousePos.x, mousePos.y, scale);
    }