Question

我试图用这样的画布创建绘图应用程序：

PrepearedStatement

但是，当我尝试在屏幕上绘画时，什么也没发生。我在Chrome，Firefox和Safari上尝试过。我一直在寻找最简单的方法，但我不明白我的错误... 我在做什么错了？

Answer 1

在第8行中，您有：

var posx = mousePos;.x;

;是错误的。是的：

var posx = mousePos.x;

var md = false;
    var canvas = document.getElementById('a');
    canvas.addEventListener('mousedown', down);
    canvas.addEventListener('mouseup', toggledraw);
    canvas.addEventListener('mousemove',
    function (evt){
        var mousePos = getMousePos (canvas, evt);
        var posx = mousePos.x;
        var posy = mousePos.y;
        draw(canvas, posx, posy);
    });
    function down(){
        md = true;
    }
    function toggledraw(){
        md = false;
    }
    function getMousePos(canvas, evt){
        var rect = canvas.getBoundingClientRect();
        return {
            x:evt.clientX - rect.left, 
            y:evt.clientY - rect.top
        };
    }
    function draw (canvas, posx, posy){
        var context = canvas.getContext('2d');
        if (md){
            context.fillRect(posx, posy, 4, 4);
        }
    }

canvas {
  border: 1px solid black;
}

<canvas id="a" width="400" height="200"></canvas>

Answer 2

调试时，应先询问控制台（开发人员工具），然后再询问此处。在您的情况下，您遇到语法错误var posx = mousePos;.x; –第一个;不应该在那里。

var md = false;
var canvas = document.getElementById('a');
canvas.addEventListener('mousedown', down);
canvas.addEventListener('mouseup', toggledraw);
canvas.addEventListener('mousemove',
function (evt){
    var mousePos = getMousePos (canvas, evt);
    var posx = mousePos.x;
    var posy = mousePos.y;
    draw(canvas, posx, posy);
});
function down(){
    md = true;
}
function toggledraw(){
    md = false;
}
function getMousePos(canvas, evt){
    var rect = canvas.getBoundingClientRect();
    return {
        x:evt.clientX - rect.left, 
        y:evt.clientY - rect.top
    };
}
function draw (canvas, posx, posy){
    var context = canvas.getContext('2d');
    if (md){
        context.fillRect(posx, posy, 4, 4);
    }
}

canvas{
  border: 1px solid black;
}

<canvas id="a" width="400" height="200"></canvas>

HTML 5-带画布的绘图应用程序未绘图

2 个答案: