Question

有一个带有save（）和clear（）函数的绘图画布。问题是，不能调用clear函数，而可以调用save函数。我尝试了很多，但仍然不知道问题出在哪里。很奇怪这些函数位于完全相同的位置，为什么不能调用clear（）？我从未遇到过这样的事情。

"use strict";

let canvas;
let ctx;
let flag=false;
let isDot=false;
let previousX=0;
let currentX=0;
let previousY=0;
let currentY=0;
let fillColor="black";
let stroke=2;
let width;
let height;

function init(){
    canvas=document.getElementById("can");
    ctx=canvas.getContext("2d");
    width=canvas.width;
    height=canvas.height;
    canvas.addEventListener("mousemove", function(e){
        findxy("move",e);
    },false);
    canvas.addEventListener("mousedown", function(e){
        findxy("down",e);
    },false);
    canvas.addEventListener("mouseup", function(e){
        findxy("up",e);
    },false);
    canvas.addEventListener("mouseout", function(e){
        findxy("out",e);
    },false);
}

function color(color){
    fillColor=color;
    if(fillColor==="white"){
        stroke=20;
    }else{
        stroke=2;
    }
}

function draw(){
    ctx.beginPath();
    ctx.moveTo(previousX, previousY);
    ctx.lineTo(currentX,currentY);
    ctx.strokeStyle=fillColor;
    ctx.lineWidth=stroke;
    ctx.stroke();
    ctx.closePath();
}

function clear(){
    console.log("Clear");
    if(confirm("Want to clear the canvas?")){
        ctx.clearRect(0,0,width,height);
    }
}

function save(){
    let img=document.getElementById("canvasimg");
    img.style.border="2px solid";
    let dataUrl=canvas.toDataURL();
    img.src=dataUrl;
    img.style.display="inline";
}

function findxy(eventType, e){
    if(eventType==="down"){
        previousX=currentX;
        previousY=currentY;
        currentX=e.clientX-canvas.offsetLeft;
        currentY=e.clientY-canvas.offsetTop;
        flag=true;
        isDot=true;
        if(isDot){
            ctx.beginPath();
            ctx.fillStyle=fillColor;
            ctx.fillRect(currentX,currentY,stroke,stroke);
            ctx.closePath();
            isDot=false;
        }
    }
    if(eventType==="up"||eventType==="out"){
        flag=false;
    }
    if(eventType==='move'){
        if(flag){
            previousX=currentX;
            previousY=currentY;
            currentX=e.clientX-canvas.offsetLeft;
            currentY=e.clientY-canvas.offsetTop;
            draw();
        }
    }
}

.container{
    display: flex;
    flex-direction: row;
}

.canvas{
    margin-right: 10px;
}

.color-container{
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;
    height: 75px;
    width: 80px;
    padding-right: 20px;
}

.color-container > div{
    width: 20px;
    height: 20px;
    margin: 3px;
}

#green{background: green;}
#blue{background: blue;}
#red{background: red}
#orange{background:orange}
#black{background:black}
#white{
    background:white;
    width: 20px;
    height: 20px;
    border: 2px solid;
    margin: 7px 3px 3px 3px;
}

img{
    margin-left: 10px;
}

canvas{
    border: 2px solid;
}

<html>
    <head>
        <title>Canvas</title>
        <link rel="stylesheet" href="./style.css">

    </head>
    <body class="container" onload="init()">
        <div class="canvas">
            <div>
                <canvas id="can" width="400" height="400"></canvas>
            </div>
            <div>
                <button onclick="save()">Save</button>
                <button onclick="clear()">Clear</button>
            </div>
        </div>
        <div>
            <div>Choose color</div>
            <div class="color-container">
                <div id="green" onclick="color('green')"></div>
                <div id="blue" onclick="color('blue')"></div>
                <div id="red" onclick="color('red')"></div>
                <div id="yellow" onclick="color('yellow')"></div>
                <div id="orange" onclick="color('orange')"></div>
                <div id="black" onclick="color('black')"></div>
            </div>
        </div>
            <div>Eraser</div>
            <div id="white" onclick="color('white')"></div>
        </div>
        <img id="canvasimg" alt="my picture" style="display: none;" width="400"; height="400">
    </body>
</html>

Answer 1

clear()是保留功能。使用其他任何名称：

"use strict";

let canvas;
let ctx;
let flag = false;
let isDot = false;
let previousX = 0;
let currentX = 0;
let previousY = 0;
let currentY = 0;
let fillColor = "black";
let stroke = 2;
let width;
let height;

function init() {
  canvas = document.getElementById("can");
  ctx = canvas.getContext("2d");
  width = canvas.width;
  height = canvas.height;
  canvas.addEventListener("mousemove", function(e) {
    findxy("move", e);
  }, false);
  canvas.addEventListener("mousedown", function(e) {
    findxy("down", e);
  }, false);
  canvas.addEventListener("mouseup", function(e) {
    findxy("up", e);
  }, false);
  canvas.addEventListener("mouseout", function(e) {
    findxy("out", e);
  }, false);
}

function color(color) {
  fillColor = color;
  if (fillColor === "white") {
    stroke = 20;
  } else {
    stroke = 2;
  }
}

function draw() {
  ctx.beginPath();
  ctx.moveTo(previousX, previousY);
  ctx.lineTo(currentX, currentY);
  ctx.strokeStyle = fillColor;
  ctx.lineWidth = stroke;
  ctx.stroke();
  ctx.closePath();
}

function clearDrawing() {
  console.log("Clear");
  if (confirm("Want to clear the canvas?")) {
    ctx.clearRect(0, 0, width, height);
  }
}

function save() {
  let img = document.getElementById("canvasimg");
  img.style.border = "2px solid";
  let dataUrl = canvas.toDataURL();
  img.src = dataUrl;
  img.style.display = "inline";
}

function findxy(eventType, e) {
  if (eventType === "down") {
    previousX = currentX;
    previousY = currentY;
    currentX = e.clientX - canvas.offsetLeft;
    currentY = e.clientY - canvas.offsetTop;
    flag = true;
    isDot = true;
    if (isDot) {
      ctx.beginPath();
      ctx.fillStyle = fillColor;
      ctx.fillRect(currentX, currentY, stroke, stroke);
      ctx.closePath();
      isDot = false;
    }
  }
  if (eventType === "up" || eventType === "out") {
    flag = false;
  }
  if (eventType === 'move') {
    if (flag) {
      previousX = currentX;
      previousY = currentY;
      currentX = e.clientX - canvas.offsetLeft;
      currentY = e.clientY - canvas.offsetTop;
      draw();
    }
  }
}

.container {
  display: flex;
  flex-direction: row;
}

.canvas {
  margin-right: 10px;
}

.color-container {
  display: flex;
  flex-flow: row wrap;
  align-content: space-around;
  height: 75px;
  width: 80px;
  padding-right: 20px;
}

.color-container>div {
  width: 20px;
  height: 20px;
  margin: 3px;
}

#green {
  background: green;
}

#blue {
  background: blue;
}

#red {
  background: red
}

#orange {
  background: orange
}

#black {
  background: black
}

#white {
  background: white;
  width: 20px;
  height: 20px;
  border: 2px solid;
  margin: 7px 3px 3px 3px;
}

img {
  margin-left: 10px;
}

canvas {
  border: 2px solid;
}

<body class="container" onload="init()">
  <div class="canvas">
    <div>
      <canvas id="can" width="400" height="400"></canvas>
    </div>
    <div>
      <button onclick="save()">Save</button>
      <button onclick="clearDrawing()">Clear</button>
    </div>
  </div>
  <div>
    <div>Choose color</div>
    <div class="color-container">
      <div id="green" onclick="color('green')"></div>
      <div id="blue" onclick="color('blue')"></div>
      <div id="red" onclick="color('red')"></div>
      <div id="yellow" onclick="color('yellow')"></div>
      <div id="orange" onclick="color('orange')"></div>
      <div id="black" onclick="color('black')"></div>
    </div>
  </div>
  <div>Eraser</div>
  <div id="white" onclick="color('white')"></div>
  </div>
  <img id="canvasimg" alt="my picture" style="display: none;" width="400" ; height="400">
</body>

无法使用onclick调用名为clear的函数

1 个答案: