html5畫布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爲兩倍。

這使得較大畫布上的筆畫顯得較暗。