html5 canvas drawImage 从一个画布到另一个画布

Question

我有两个画布第一个画布是原始大小第二个画布是两倍大。同时我在两个画布上绘制，但在第二个画布上我绘制了两倍大的元素，它看起来像在缩放的第一个画布上。

外观如下：

问题是当我尝试从大画布重画到小画布时，我的画会变得更亮一点，但只有在使用铅笔的地方更亮：

smallCtx.clearRect(0, 0, smallCanvas.width, smallCanvas.height);
smallCtx.drawImage(bigCanvas, 0, 0, paperFullWidth, paperFullHeight);

完整代码：

$(document).ready(function() {
    
    function Pencil(smallCtx, bigCtx, size, color, opacity, moreTimes) {
        this.init(smallCtx, bigCtx, size, color, opacity, moreTimes);
    }
    Pencil.prototype = {
        smallCtx: null, moreTimes: null,
        prevMouseX: null, prevMouseY: null,
        moreTimes: 1,
        color: '0, 0, 0',
        opacity: 1,

        init: function(smallCtx, bigCtx, size, color, opacity, moreTimes) {
            this.smallCtx = smallCtx;
            this.bigCtx = bigCtx;

            this.setSize(size);
            this.setColor(color);
            this.setOpacity(opacity);

            this.moreTimes = moreTimes;
        },

        stroke: function(mouseX, mouseY, scale) {
            /* in first canvas drawing */
            this.smallCtx.beginPath();
            this.smallCtx.moveTo(this.prevMouseX, this.prevMouseY);
            this.smallCtx.lineTo(mouseX, mouseY);
            this.smallCtx.closePath();
            this.smallCtx.stroke();

            /* in second canvas drawing scaled */
            this.bigCtx.lineWidth = this.smallCtx.lineWidth * this.moreTimes;
            this.bigCtx.beginPath();
            this.bigCtx.moveTo( this.prevMouseX * this.moreTimes, this.prevMouseY * this.moreTimes);
            this.bigCtx.lineTo( mouseX * this.moreTimes, mouseY * this.moreTimes );
            this.bigCtx.closePath();
            this.bigCtx.stroke();

            this.move(mouseX, mouseY);   
        },

        move: function(mouseX, mouseY) {
            this.prevMouseX = mouseX;
            this.prevMouseY = mouseY;
        },

        /* GETTERS */
        getSize: function() {
            return this.smallCtx.lineWidth;
        },
        getColor: function() {
            return this.color;
        },
        getOpacity: function() {
            return this.opacity;
        },

        /* SETTERS */
        setSize: function(size) {
            this.smallCtx.lineWidth = size;
        },
        setColor: function(color) {
            this.color = color; //rgb like: 255,0,0
            this.bigCtx.shadowBlur = this.smallCtx.shadowBlur = 0;
            this.setStrokeStyle();
        },
        setOpacity: function(opacity) {
            this.opacity = opacity;
            this.setStrokeStyle();
        },
        setStrokeStyle: function() {
            this.bigCtx.strokeStyle = this.smallCtx.strokeStyle = 
            this.bigCtx.fillStyle = this.smallCtx.fillStyle = 'rgba(' + this.getColor() + ', ' + this.getOpacity() +')';     
        }, 
    }
    
    
     
    
    var smallCanvas = document.getElementById("smallCanvas");
    var smallCtx = smallCanvas.getContext("2d");

    var bigCanvas = document.getElementById("bigCanvas");
    var bigCtx = bigCanvas.getContext("2d");

    var paperFullWidth = 150;
    var paperFullHeight = 150; 

    var moreTimes = 2;
    var scale = 100;

    smallCanvas.width  = paperFullWidth;
    smallCanvas.height = paperFullHeight;
    bigCanvas.width = paperFullWidth * moreTimes;
    bigCanvas.height = paperFullHeight * moreTimes;

    fillCanvas('rgba(255,255,255,1)');
    drawSquare(); //draw a square
    pencil = new Pencil(smallCtx, bigCtx, 1, "0,0,0", 0.3, moreTimes);

    pointerPos = {};  //for pointer position
    var isCanDraw = false;
    

    /****** MOUSE EVENTS FOR CANVAS ******/
    $('#smallCanvas').on('mousedown', function(e) {
        pointerPos = getMousePos(smallCanvas, e);
        isCanDraw = true;
        pencil.move(pointerPos.x, pointerPos.y);    
    });

    $('#smallCanvas').on('mouseup', function(e) {
        pointerPos = getMousePos(smallCanvas, e);    
        isCanDraw = false;;   
    });

    $('#smallCanvas').on('mousemove', function(e) {
        if(isCanDraw) {
            pointerPos = getMousePos(smallCanvas, e);
            pencil.stroke( pointerPos.x, pointerPos.y, scale );
        }          
    });

    $('#redraw').click(function() {
        smallCtx.clearRect(0, 0, smallCanvas.width, smallCanvas.height);
        smallCtx.drawImage(bigCanvas, 0, 0, paperFullWidth, paperFullHeight);
    });

    function fillCanvas(color) {
        var tempFillStyle = smallCtx.fillStyle;

        bigCtx.fillStyle = smallCtx.fillStyle = color;
        smallCtx.fillRect(0, 0, smallCanvas.width, smallCanvas.height);
        bigCtx.fillRect(0, 0, bigCanvas.width, bigCanvas.height);

        bigCtx.fillStyle = smallCtx.fillStyle = tempFillStyle;
    }
   
    function getMousePos(canvas, evt) {   
        evt = evt.originalEvent || window.event || evt;
        var rect = canvas.getBoundingClientRect();

        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };   
    }

    function drawSquare() {
        smallCtx.fillStyle = bigCtx.fillStyle = 'rgba(0,0,0,0.3)';
        smallCtx.fillRect(0,0,60,60);
        bigCtx.fillRect(0,0,60*moreTimes,60*moreTimes);
    }

});

    *{
        background-color:#CECECE;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id='smallCanvas' style='z-index: 1;'></canvas>
<canvas id="bigCanvas"></canvas>
<input type='button' id='redraw' value='Redraw'>

Answer 1

通过设置moreTimes=2，您正在使大画布上的context.lineWidth 宽度增加一倍。

这会使较大画布上的笔触显得更暗。