Question

我正在尝试创建一个允许访问者在同一页面上绘制多个画布的网页。我到处搜索过，找不到一个好的教程。这是我到目前为止所做的。

var mousePressed = false;
var lastX, lastY;
var ctx;

    function InitThis() {
    ctx = document.getElementById('room1').getContext("2d");

    $('#room1').mousedown(function (e) {
        mousePressed = true;
        Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
    });

    $('#room1').mousemove(function (e) {
        if (mousePressed) {
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
        }
    });

    $('#room1').mouseup(function (e) {
        mousePressed = false;
    });

    $('#room1').mouseleave(function (e) {
        mousePressed = false;
    });
    }

    function Draw(x, y, isDown) {
        if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = $('#penColor').val();
        ctx.lineWidth = "4";
        ctx.lineJoin = "round";
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
    }
    lastX = x;
    lastY = y;
}

function clearArea() {
    // Use the identity matrix while clearing the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

实现这一目标的最佳方法是什么？

Answer 1

您可以在网页上放置多个<canvas>元素。每个画布都有自己的上下文，因此拥有全局ctx变量并不再有意义。

您的事件处理程序首先需要使用this.getContext("2d")获取事件发生的画布上下文。

当您修改任何绘图函数以将上下文作为函数参数时，您可以轻松地为所有画布使用相同的函数。

一页上有多个绘图画布

1 个答案: