Question

我试图创建一个页面，允许用户选择他们想要绘制的画布大小。

为此，我创建了一个页面，其中包含3个不同大小的画布以及每个画布的按钮。我已经隐藏了CSS中的所有画布，然后在单击相关按钮时使用jQuery显示画布。问题是，除了我的HTML文档中的第一个画布外，它破坏了实际绘制所有画布的能力。我怀疑这个代码存在问题：

HTML

var context = $canvas[0].getContext("2d");

$canvas.mousedown(function(e){
  lastEvent = e;
  mouseDown = true;
}).mousemove(function(e){
   //Draw lines
  if(mouseDown) {
    context.beginPath();
    context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
    context.lineTo(e.offsetX, e.offsetY);
    context.strokeStyle = color;
    context.stroke();
    lastEvent = e;
  }
}).mouseup(function(){
  mouseDown = false;
}).mouseleave(function(){
  $canvas.mouseup(); 
});

JS

/*global s:true*/
var m = 'My name is ';
function updateMsg(h) {
    "use strict";
    var el = m + h;
    s = ['Adam', 'Joseph'];
    return s;
}
var n1 = document.getElementById("msg");
n1.textContent = updateMsg("Sarah")[0];

有没有办法用这个.getContext字符串选择调用3画布？ Full code in case it's useful

Answer 1

你应该尝试类似的东西

var tab = [$canvas[0].getContext("2d"), $canvas[1].getContext("2d"), $canvas[2].getContext("2d")]
var lastEvent = null;
var mouseDown = false;

canvasParent.mousedown(function(e)
{
  lastEvent = e;
  mouseDown = true;
}).mousemove(function(e)
{
  if(mouseDown) {
    var i = 0;
    while (tab[i])
    {
      tab[i].beginPath();
      tab[i].moveTo(lastEvent.offsetX, lastEvent.offsetY);
      tab[i].lineTo(e.offsetX, e.offsetY);
      tab[i].strokeStyle = color;
      tab[i].stroke();
      i += 1;
    }
      lastEvent = e;
  }
}).mouseup(function(e)
{
  mouseDown = false;
}).mouseleave(function()
{
  var i = 0;
  while (tab[i])
  {
    tab[i].mouseup()
    i += 1;
  }
});

在同一页面上的多个画布上使用canvas.getContext（＆＃34; 2d＆＃34;）

1 个答案: