Question

我可以创建可调整大小和可移动的线。但我不能创建第二行。我想我必须这样做在canvas上保存对象并使用drawImage绘制drawagain，但我无法做到。我也使用unbind来停止绘图

var canvas = document.getElementById( 'canvas' ),
    c = canvas.getContext( '2d' ),
    mouseX = 0,
    mouseY = 0,
    width = 700,
    height = 700,
    distx = 0,
    disty = 0,
    hw = 10,
    hh = 10;


canvas.width = width;
canvas.height = height;

function draw(x,y) {


  distx = mouseX - hw;
  disty = mouseY - hh;

  c.clearRect( 0, 0, width, height );
  // set the colour
  c.save();
  c.translate( hw, hh);
  c.beginPath()
  c.strokeStyle = '#fff';
  c.moveTo(x, y );
  c.lineTo( distx, disty );
  c.closePath();
  c.stroke();

  c.closePath();
    c.restore();        
    c.save();



}
var abc = true;
//all browsers

var click =     $("canvas").bind('click',function(eb){
  if( eb.offsetX ){
    mX = eb.offsetX;
    mY = eb.offsetY;
  } else {
    mX = eb.pageX;
    mY = eb.pageY;
  }
var mousemove = $("canvas").bind('mousemove',function(e){
  if( e.offsetX ){
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else {
    mouseX = e.pageX;
    mouseY = e.pageY;
  }
draw(mX,mY);
});
});
$("canvas").dblclick(function(){
$("canvas").unbind("mouseenter");
$("canvas").unbind("mousemove");
});

我该怎么做才能创建第二行

Answer 1

这里的主要问题如下：

为了让刷新的显示器，你在每次刷新时调用clearRect，并清除你以前的绘图。

解决这个问题的方法之一是在另一个上方使用两个画布。你使用其中一个来跟踪未来的抽奖（所以你不必清楚这个，只有当前的线）。另一个用于在用户创建时绘制每一行。这个永远不会被清除。

作为一个示例可能是更好的理解方式，您可以在此处看到一个示例：http://jsfiddle.net/dTs4h/1/

画布创建第二行

1 个答案: