画布绘图不起作用

Question

在我正在开发的应用程序中，应该可以打开多个 div 框并在每个框上进行绘制（如 MS 油漆灯）。

我已成功打开一个盒子并在其上绘图，但是当我从画布“id”更改为画布“类”（以便能够打开多个盒子并在每个盒子上绘画）时，它停止工作。现在，当我尝试绘画时，什么也没有发生。我做错了什么？

var color = "red";
var shape = "square";
var size = 10;

var theWindow = $('.window').last();
var bottomWindow = $('.windowBottom').last();

var letsdraw = false;
var theCanvas = $('.paint').last();

var ctx = theCanvas.getContext('2d');
ctx.strokeStyle = 'red';
theCanvas.width  = 430;
theCanvas.height = 317;

var canvasOffset = $(theCanvas).offset();

$(theCanvas).mousemove(function(e) {
    if (letsdraw === true) {
        ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
        ctx.stroke();
    }
});

$(theCanvas).mousedown(function(e) {
    letsdraw = true;
    ctx.strokeStyle = color;
    ctx.lineWidth = size;
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
});

$(window).mouseup(function() {
    letsdraw = false;
});

Answer 1

这个问题是你仍然把它当作一个画布。

$('.paint').mousemove(function(e) {
    if (letsdraw === true) {
        var ctx = this.getContext('2d');
        var canvasOffset = $(this).offset();
        ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
        ctx.stroke();
    }
});

所以我删除了theCanvas 并使用this 来引用画布。点击演示链接查看实际效果：

Demo

---

使用data attr 进行更多编辑：

// using data attr to store lets draw per canvas
$(window).mouseup(function() {
    $('.paint').each(function () {
       $(this).data('letsdraw', false); 
    });
});

$('.paint').mousemove(function(e) {
    if ($(this).data('letsdraw') === true) {
        var ctx = this.getContext('2d');
        var canvasOffset = $(this).offset();
        ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
        ctx.stroke();
    }
});

---

改变高度和宽度：

$('.paint').each(function () {
    this.width = 430;
    this.height = 20
})

我只做一次，因为改变画布的高度/宽度实际上会擦除所有绘图。