复制图像数据的更快速的方法

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>