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

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';

至于掩盖更快......

更快速地屏蔽图像的方法是：

• 在第二个画布上绘制您的单行。
• 使用合成使所有新绘制仅在现有像素不透明的情况下可见。这个合成是源于＆＃39;来源＆＃39;并使用：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';
}

以下是一个示例和演示：

＆＃13;

＆＃13;

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();
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;