Question

目的是能够绘制以mousedown开头并以mouseup结束的行。在两者之间，使用draw()函数在mousemouse时将线条绘制到画布上。我需要在拖动线条时清除画布。

JS：

var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");

var isDrawing = false;
var mX, mY, rX, rY;


function InitThis() {


    c.onmousedown = function(e) {
      isDrawing = true;
      mX = e.clientX;
      mY = e.clientY;
      };

    c.onmousemove = function(e) {
        if (isDrawing) {
          rX = e.clientX;
          rY = e.clientY;
          draw();
          ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
    };

    c.onmouseup = function(e) {
      rX = e.clientX;
      rY = e.clientY;
      isDrawing = false;
  }

}

function draw() {

    ctx.beginPath();
    ctx.moveTo(mX,mY);
    ctx.lineTo(rX, rY);
    ctx.closePath();
    ctx.stroke();

}

InitThis()

HTML：

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[draw lines with mouse]">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<canvas id="canvas1" width="800" height="900" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>

我收到此错误：

ReferenceError: canvas is not defined
    at HTMLCanvasElement.InitThis.c.onmousemove (zivuqeyure.js:22:31)

如何在函数内引用画布？

Answer 1

您正在引用具有变量“c”的画布对象。

这是第一行代码。

稍后，您尝试引用未定义的“canvas”变量。（你应该使用“c”而不是“canvas”）

解释器不知道“canvas”是指“画布对象，它存储在c中”。解释器完全按照您的说法执行，但您尝试引用不存在的变量。

函数内的HTML5画布引用

1 个答案: