时间戳

首页 > 解决方案 > 如何解决这个意外的令牌错误？

javascript - 如何解决这个意外的令牌错误？

问题描述

我正在尝试制作一个非常简单的绘图应用程序，但我在语法方面遇到了真正的麻烦......

我只希望用户能够在画布上画一条线。

// paint.js
window.onload = function() {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  //resizing
  //canvas.height = window.innerHeight;
  //canvas.width = window.innerWidth;

  //variables
  var painting = false;

  function startPosition(e) {
    painting = true;
    draw(e);
  }

  function endPosition() {
    painting = false;
    context.beginPath();
  }

  function draw(e) {
    if (!painting) return;
    context.lineWidth = 7;
    context.lineCap = "round";
    context.strokeStyle = "green";

    context.lineTo(e.clientX, e.clientY);
    context.stroke();
    context.beginPath();
    context.moveTo(e.clientX, e.clientY);
  }

  //EventListeners
  canvas.addEventListener("mousedown", startPosition)
  canvas.addEventListener("mouseup", endPosition);
  canvas.addEventListener("mousemove", draw);
};

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>draw</title>
<link href="grove.css" rel="stylesheet" type="text/css">
</head>

<body>

<h1>draw</h1>

<div class="nav">
    
        <a href="artists.html">artists</a>
        <a href="draw.html">draw and listen</a>
        <a href="store.html">store</a>

</div>
    
<div>
  <canvas id="canvas" height="480" width="640" style="border:1px solid #000000; background-color: white;">Please update your browser.</canvas>
  <!-- <script src="paint.js"></script> -->
</div>

<a class="aHome" href="index.html"><img src="img/planet-green.png" style="float:right;width:42px;height:42px;" alt="home planet"></a>

<div>

    <p style="clear: right;">© 2020</p>
    
</div>  
</body>
</html>

有完整的 HTML 和 js 文件提供更多上下文来尝试解决画布在网页中没有响应的问题。它似乎可以作为堆栈溢出中的独立函数正常工作，这让我相信其他代码的问题......

标签： javascripterror-handlingunexpected-token

解决方案

推荐阅读