複製圖像數據的更快速的方法

Question

我有以下腳本

// copy image data to secondary canvas 
var pixelData = contextSource.getImageData(x - (lineWidth/2), y - (lineWidth/2), lineWidth, lineWidth); 
var tmpCanvas = document.createElement('canvas'); 
tmpCanvas.width = tmpCanvas.height = lineWidth; 
var tmpContext = tmpCanvas.getContext('2d'); 

tmpContext.putImageData(pixelData, 0, 0); 

contextDest.save(); 
contextDest.arc(x, y, (lineWidth/2), 0, 2*Math.PI); 
contextDest.clip(); 
contextDest.drawImage(tmpCanvas, x - (lineWidth/2), y - (lineWidth/2)); 
contextDest.restore(); 

腳本從帆布源時鼠標移動在源採樣的圖像數據，然後將其複製到目的地。該腳本運行良好，但有點慢。這是當我將鼠標指針移動一點時的結果。

有沒有比我更快的方法？請幫助

Answer 1

@Banana好點。

代替繪圖的只是鼠標的位置，嘗試連接位置成一單一連續線..

如果你想在你的插圖圓潤的效果，你可以設置：

context.lineCap='round'; 
context.lineJoin='round'; 

至於掩蓋更快...

掩蓋你的形象更快的方式是：

• 在第二個畫布上繪製單行。
• 使用合成來使所有新繪製僅在現有像素不透明的情況下可見。這種合成是'源內'，並使用：context.globalCompositeOperation='source-in'
• 將您的圖像繪製到第二個畫布上。圖像將只顯示該行的位置。

使用合成是快得多，因爲合成是硬件加速並通過瀏覽器優化。

那合成的代碼可能是這樣的：

function draw(){ 
    // clear the second canvas 
    ctx1.clearRect(0,0,cw,ch); 

    // draw your continuous line 
    ctx1.beginPath(); 
    ctx1.moveTo(points[0].x,points[0].y); 
    for(var i=1;i<points.length;i++){ 
     p=points[i]; 
     ctx1.lineTo(p.x,p.y); 
    } 
    ctx1.stroke(); 

    // set compositing so new draws only appear in 
    // existing opaque pixels 
    ctx1.globalCompositeOperation='source-in'; 

    // draw the image 
    // the image will only be visible in the exising line 
    ctx1.drawImage(img,0,0); 

    // be tidy! return compositing to its default mode 
    ctx1.globalCompositeOperation='source-over'; 
} 

下面是一個例子，演示：

var canvas1=document.getElementById("canvas1"); 
 
var ctx1=canvas1.getContext("2d"); 
 

 
var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var $canvas=$("#canvas"); 
 
var canvasOffset=$canvas.offset(); 
 
var offsetX=canvasOffset.left; 
 
var offsetY=canvasOffset.top; 
 
var scrollX=$canvas.scrollLeft(); 
 
var scrollY=$canvas.scrollTop(); 
 

 
var isDown=false; 
 
var startX; 
 
var startY; 
 

 
var points=[]; 
 
var cw,ch; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/tempHouse%201.jpg"; 
 
function start(){ 
 
    cw=canvas.width=canvas1.width=img.width; 
 
    ch=canvas.height=canvas1.height=img.height; 
 

 
    ctx1.lineCap = "round"; 
 
    ctx1.lineJoin = "round"; 
 
    ctx1.lineWidth=20; 
 

 
    ctx.drawImage(img,0,0); 
 

 
    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 
    $("#canvas").mouseup(function(e){handleMouseUp(e);}); 
 
    $("#canvas").mouseout(function(e){handleMouseOut(e);}); 
 
} 
 

 

 
function draw(){ 
 
    // clear the second canvas 
 
    ctx1.clearRect(0,0,cw,ch); 
 

 
    // draw your continuous line 
 
    ctx1.beginPath(); 
 
    ctx1.moveTo(points[0].x,points[0].y); 
 
    for(var i=1;i<points.length;i++){ 
 
    p=points[i]; 
 
    ctx1.lineTo(p.x,p.y); 
 
    } 
 
    ctx1.stroke(); 
 

 
    // set compositing so new draws only appear in 
 
    // existing opaque pixels 
 
    ctx1.globalCompositeOperation='source-in'; 
 

 
    // draw the image 
 
    // the image will only be visible in the exising line 
 
    ctx1.drawImage(img,0,0); 
 

 
    // be tidy! return compositing to its default mode 
 
    ctx1.globalCompositeOperation='source-over'; 
 
} 
 

 

 
function handleMouseDown(e){ 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 
    points.length=0; 
 
    points.push({x:mouseX,y:mouseY}); 
 
    isDown=true; 
 
} 
 

 
function handleMouseUp(e){ 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    isDown=false; 
 
    draw(); 
 
} 
 

 
function handleMouseOut(e){ 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 
    points.push({x:mouseX,y:mouseY}); 
 
    isDown=false; 
 
    draw(); 
 
} 
 

 
function handleMouseMove(e){ 
 
    if(!isDown){return;} 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 
    points.push({x:mouseX,y:mouseY}); 
 
    draw(); 
 
}

body{ background-color: ivory; } 
 
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<canvas id="canvas" width=300 height=300></canvas><br> 
 
<canvas id="canvas1" width=300 height=300></canvas>