Question

我已经使用JavaScript在HTML页面上进行了个性测试。基本上，用户选择问题的答案，下面的段落会更改内容，并且黑点会出现在彩色网格（我使用画布元素创建的网格）中以指示您的个性颜色。

起初，一切似乎都工作得很好。问题是，如果您只做一次又想再次做一次，就不能只选择其他答案之一并单击绿色按钮。现在，两个黑点将出现在彩色网格中。有谁知道如何在JavaScript代码中解决这个问题？

这是我的代码：

    // The draw function loads when the page is opened
      function draw() {
        let canvas = document.getElementById('canvas');
        if (canvas.getContext) {
          let ctx = canvas.getContext('2d');
    
        // The 4 colored squares
        ctx.fillStyle = 'rgb(204, 51, 0)';
        ctx.fillRect(0, 0, 150, 150);
        ctx.fillStyle  = 'rgb(51, 153, 51)';
        ctx.fillRect(0, 150, 150, 150);
        ctx.fillStyle = 'rgb(255, 255, 0)';
        ctx.fillRect(150, 0, 150, 150);
        ctx.fillStyle = 'rgb(51, 102, 204)';
        ctx.fillRect(150, 150, 150, 150);
    
    
      }
      }
    
        const form = document.querySelector('form');
        let btn = document.querySelector('button');
        let para = document.querySelector('p');
    
        //Event listener for the button
        btn.addEventListener('click', myColor);
    
        function myColor() {
          let choice = form.color.value;
          let canvas = document.getElementById('canvas');
          if (!choice) {
            para.textContent = 'Please chose one of the answers above.';
          }
    
          if (choice === 'red') {
            para.textContent = 'You´re so red!';
            // Adding a black circle to indicate color on canvas
            if (canvas.getContext) {
            let ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(75, 75, 23, 0, Math.PI * 2, true);
            ctx.fillStyle ='rgb(0, 0, 0)';
            ctx.fill();
          }
    
          } else if (choice === 'blue') {
            para.textContent = 'You´re so blue!';
            // Adding a black circle to indicate color on canvas
            if (canvas.getContext) {
            let ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(225, 225, 23, 0, Math.PI * 2, true);
            ctx.fillStyle ='rgb(0, 0, 0)';
            ctx.fill();
          }
          }
    
          else if (choice === 'yellow') {
            para.textContent = 'You´re so yellow!';
            // Adding a black circle to indicate color on canvas
            if (canvas.getContext) {
            let ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(225, 75, 23, 0, Math.PI * 2, true);
            ctx.fillStyle ='rgb(0, 0, 0)';
            ctx.fill();
          }
          }
    
          else if (choice === 'green') {
            para.textContent = 'You´re so green!';
            // Adding a black circle to indicate color on canvas
            if (canvas.getContext) {
            let ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(75, 225, 23, 0, Math.PI * 2, true);
            ctx.fillStyle ='rgb(0, 0, 0)';
            ctx.fill();
          }
          }
      }

<body onload="draw();">
    
      <form action="">
      <h1>A friend invites you to a party. You...</h1>
      <br />
    
      <input id="red" type="radio" name="color" value="red">...bluntly tell your friend you have other priorities. <br/>
      <input id="blue" type="radio" name="color" value="blue">...tell your friend you are finishing a coding assignment tonight. <br/>
      <input id="yellow" type="radio" name="color" value="yellow">...hug your friend and start discussing the outfit. <br/>
      <input id="green" type="radio" name="color" value="green">...thank your friend for inviting you, and tell her you look forward to it. <br/>
    
      </form>
    
      <button> Show me the color of my personality! </button>
    
      <canvas id="canvas" width="300" height="300">
      A picture of where your personality type fits in.
      </canvas>
    
      <p></p>

Answer 1

一种方法可能是删除canvas元素，然后在单击按钮时重新应用它。

function myColor() {
  let choice = form.color.value;

var oldcanv = document.getElementById('canvas');
document.removeChild(oldcanv)

var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);
  let canvas = document.getElementById('canvas');
  if (!choice) {
    para.textContent = 'Please chose one of the answers above.';
  }

.......

或使用

ctx.clearRect(0, 0, canvas.width, canvas.height);

代替先前的建议。

Answer 2

您正在寻找的是clearRect方法：

CanvasRenderingContext2D.clearRect()

这将允许您清除像素的2D上下文。

如何使用JavaScript部分刷新<canvas>元素？

2 个答案: