画布上的重绘如何调整大小而不模糊？

Question

调整canvas元素的大小(通过样式更改)时,我也想缩放画布的绘制图像.我不能只改变高度/宽度,因为这会导致画布自行清除,所以我这样做:

1. 创建临时画布元素
2. 将当前画布的图像绘制到该临时画布上
3. 调整当前画布的大小
4. 将临时画布的图像绘制回当前画布,但缩放到新大小

这会导致一些模糊 - 在许多调整大小后非常明显(例如:拖动以调整大小时).如果没有任何模糊,我该怎么做？

编辑:关闭图像平滑(context.webkitImageSmoothingEnabled = false;)并没有解决这个问题,它只是让重绘越来越参差不齐,直到图像数量调整大小后,看上去一点也不像原来的.

调用resize事件:

    var tmpCanvas = null;       

    //Make a temporary canvas
    tmpCanvas = document.createElement( "canvas" );

    //Set its size to be equal
    tmpCanvas.height = originalCanvas.height;
    tmpCanvas.width = originalCanvas.width;

    //Draw our current canvas onto it
    tmpCanvas.getContext( "2d" ).drawImage( originalCanvas, 0, 0 );

    //Set new dimensions
    originalCanvas.width = originalCanvas.offsetWidth;
    originalCanvas.height = originalCanvas.offsetHeight;

    var originalContext = originalCanvas.getContext( "2d" );

    //Set background and colors
    originalContext.fillStyle = "#ffffff";
    originalContext.strokeStyle = "#000000";

    //Set paintbrush
    originalContext.lineWidth = 4;
    originalContext.lineCap = "round";

    //Fill background as white
    originalContext.fillRect( 0, 0, originalCanvas.width, originalCanvas.height );

    //We have a saved signature
    if ( SignatureCanvas.hasSignature === true )
    {
        //Draw it back but scaled (results in blurred image)
        originalContext.drawImage( tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, originalCanvas.width, originalCanvas.height );

        /** 
         * This results in a blurred image as well
         //Draw it back but scaled
         originalContext.scale( originalCanvas.width / tmpCanvas.width, originalCanvas.height / tmpCanvas.height );
         originalContext.drawImage( tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, tmpCanvas.width, tmpCanvas.height );
         */
    }

有没有办法获得笔画并"缩放"所有这些点并重绘？

Answer 1

实际上重绘图像，而不是从原始画布中获取渲染图像。我的意思是执行与在原始画布上执行的逻辑相同的逻辑，但涉及的点缩放到新的大小。

如果可以的话，请考虑使用 SVG。它的本质决定了它的可扩展性。

编辑：我想到的另一个选择是简单地使用一个巨大的画布来开始。缩小尺寸往往比放大尺寸看起来更好，尤其是在平滑处理的情况下。