移动式画布

Question

我试图使用Javascript中的画布在空白矩形中绘制一些东西，但我得到的只是这样一个移位的画笔：https://i.imgur.com/s7g34wi.gifv

这是我的代码：

​

    var canvasE = {
    canvas : document.getElementById("canvas"),
    ctx : canvas.getContext("2d"),
    rect : canvas.getBoundingClientRect(),
    mouse : {x: 0, y: 0},


    
    initCanvas(){
        canvasE.canvas.addEventListener('mousemove', function(e){
            canvasE.mouse.x = e.offsetX
            canvasE.mouse.y = e.offsetY
        }, false);

        canvasE.ctx.lineWidht = 3;
        canvasE.ctx.lineJoin = "round";
        canvasE.ctx.lineCap = "round";
        canvasE.ctx.strokeStyle = "black";

        canvasE.canvas.addEventListener('mousedown', function(e){
            canvasE.ctx.beginPath();
            canvasE.ctx.moveTo(canvasE.mouse.x, canvasE.mouse.y);
            canvasE.canvas.addEventListener('mousemove', onPaint, false);
        }, false);
    
        canvasE.canvas.addEventListener('mouseup', function(e){
            canvasE.canvas.removeEventListener('mousemove', onPaint, false);
        }, false);

        onPaint = function() {
            canvasE.ctx.lineTo(canvasE.mouse.x, canvasE.mouse.y);
            canvasE.ctx.stroke();
        }
    },

    clear(){
        canvasE.ctx.clearRect(0, 0, canvas.width, canvas.height);
    },}
    
canvasE.initCanvas();

canvas
{
  border: 1px solid black;
}

<canvas id="canvas"></canvas>

​

有谁可以帮我？

Answer 1

这是你的CSS。永远不要使用CSS为<canvas>指定宽度和高度。始终在<canvas>标记中指定它。我修好了：

​

var canvasE = {
    canvas : document.getElementById("canvas"),
    ctx : canvas.getContext("2d"),
    rect : canvas.getBoundingClientRect(),
    mouse : {x: 0, y: 0},


    
    initCanvas(){
        canvasE.canvas.addEventListener('mousemove', function(e){
            canvasE.mouse.x = e.offsetX;
            canvasE.mouse.y = e.offsetY;
        }, false);

        canvasE.ctx.lineWidth = 3;
        canvasE.ctx.lineJoin = "round";
        canvasE.ctx.lineCap = "round";
        canvasE.ctx.strokeStyle = "black";

        canvasE.canvas.addEventListener('mousedown', function(e){
            canvasE.ctx.beginPath();
            canvasE.ctx.moveTo(canvasE.mouse.x, canvasE.mouse.y);
            canvasE.canvas.addEventListener('mousemove', onPaint, false);
        }, false);
    
        canvasE.canvas.addEventListener('mouseup', function(e){
            canvasE.canvas.removeEventListener('mousemove', onPaint, false);
        }, false);

        onPaint = function() {
            canvasE.ctx.lineTo(canvasE.mouse.x, canvasE.mouse.y);
            canvasE.ctx.stroke();
        }
    },

    clear(){
        canvasE.ctx.clearRect(0, 0, canvas.width, canvas.height);
    },}
    
canvasE.initCanvas();

canvas
{
  border: 1px solid black;
}

<canvas id="canvas" width="200px" height="200px"></canvas>

​

我还修正了我在评论中提到的错误:)