Canvas putimagedata 有时无法按预期绘制

Question

我正在尝试从 canvas 的左侧中心到右侧绘制一条简单的平线。起点和终点将从文本框输入中获取。为此，我首先从头到尾画一条线，使用相同的 html 颜色和 canvas 来擦除之前的线，然后画新线。但是我的行为不一致。有时它正在绘制输入坐标，有时它不是。我可能做错了什么？

这是我的 html 代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="./css/cizim.css" />
        <title>Line</title>
        
    </head>
    <body>
        <div align="center"><canvas width ="400" height="400" id="canvas">
          
        </canvas>
    <script src="canvas.js"></script>  
        </div>
        <div align="center">
            <table width="400" border="0">
            <tbody>
              <tr>
                <td><label for="fname">Başlangıç:</label></td>
                <td><input type="text" id="start" name="fname"></td>
              </tr>
              <tr>
                <td><label for="fname">Bitiş:</label></td>
                <td><input type="text" id="end" name="sname"></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td><button id="myBtn" onclick="updateCanvas()">Draw</button></td>
              </tr>
            </tbody>
          </table>
            

        </div>
        
        
    </body>
</html>

这是我的 javascript 代码：

function updateCanvas() {
    var canvas = document.getElementById("canvas");
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var ctx = canvas.getContext("2d");  
    var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
    
    function drawPixel (x, y, r, g, b, a) {
        var index = (x + y * canvasWidth) * 4;
        //pixelDensity(1);
        canvasData.data[index + 0] = r;
        canvasData.data[index + 1] = g;
        canvasData.data[index + 2] = b;
        canvasData.data[index + 3] = a;
    }
//Drawing 0 to 400 pixels to erase previous line here
    for (var i=0;i<=400;i++){
      drawPixel(i, 200, 247, 176, 84, 255);
    }
//Drawing new line
    for (var i=start;i<=end;i++){
      drawPixel(i, 200, 255, 0, 0, 255);
    }
    ctx.putImageData(canvasData, 0, 0);
}

function updateCanvas() {
    var canvas = document.getElementById("canvas");
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var ctx = canvas.getContext("2d");  
    var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
    
    function drawPixel (x, y, r, g, b, a) {
        var index = (x + y * canvasWidth) * 4;
        //pixelDensity(1);
        canvasData.data[index + 0] = r;
        canvasData.data[index + 1] = g;
        canvasData.data[index + 2] = b;
        canvasData.data[index + 3] = a;
    }
    for (var i=0;i<=400;i++){
      drawPixel(i, 200, 247, 176, 84, 255);
    }
    for (var i=start;i<=end;i++){
      drawPixel(i, 200, 255, 0, 0, 255);
    }   
    ctx.putImageData(canvasData, 0, 0);
}

body {
    background-color: #F7B054;
  }
  
  h1 {
    color: white;
    text-align: center;
  }
  
  p {
    font-family: verdana;
    font-size: 20px;
  }

  #canvas{
    border: 2px solid black;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="./css/cizim.css" />
        <title>Line</title>
        
    </head>
    <body>
        <div align="center"><canvas width ="400" height="400" id="canvas">
          
        </canvas>
    <script src="canvas.js"></script>  
        </div>
        <div align="center">
            <table width="400" border="0">
            <tbody>
              <tr>
                <td><label for="fname">Başlangıç:</label></td>
                <td><input type="text" id="start" name="fname" value="50"></td>
              </tr>
              <tr>
                <td><label for="fname">Bitiş:</label></td>
                <td><input type="text" id="end" name="sname" value="300"></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td><button id="myBtn" onclick="updateCanvas()">Draw</button></td>
              </tr>
            </tbody>
          </table>
            
<script src="canvas.js"></script>
        </div>
        
        
    </body>
</html>

问题是输入分别为50和300，该行不显示。例如，使用 100 和 300 时，效果很好。

Answer 1

问题是您正在加载具有文本类型的 input 属性，因此 "50" 是 > "300"。解决方案是在获得值时将它们转换为数字，以便比较是数字的。请参阅下面的代码段：

function updateCanvas() {
    var canvas = document.getElementById("canvas");
    var start = parseInt(document.getElementById("start").value);
    var end = parseInt(document.getElementById("end").value);
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var ctx = canvas.getContext("2d");  
    var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
    
    function drawPixel (x, y, r, g, b, a) {
        var index = (x + y * canvasWidth) * 4;
        //pixelDensity(1);
        canvasData.data[index + 0] = r;
        canvasData.data[index + 1] = g;
        canvasData.data[index + 2] = b;
        canvasData.data[index + 3] = a;
    }
    for (var i=0;i<=400;i++){
      drawPixel(i, 200, 247, 176, 84, 255);
    }
    for (var i=start;i<=end;i++){
      drawPixel(i, 200, 255, 0, 0, 255);
    }   
    ctx.putImageData(canvasData, 0, 0);
}

body {
    background-color: #F7B054;
  }
  
  h1 {
    color: white;
    text-align: center;
  }
  
  p {
    font-family: verdana;
    font-size: 20px;
  }

  #canvas{
    border: 2px solid black;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="./css/cizim.css" />
        <title>Line</title>
        
    </head>
    <body>
        <div align="center"><canvas width ="400" height="400" id="canvas">
          
        </canvas>
    <script src="canvas.js"></script>  
        </div>
        <div align="center">
            <table width="400" border="0">
            <tbody>
              <tr>
                <td><label for="fname">Başlangıç:</label></td>
                <td><input type="text" id="start" name="fname" value="50"></td>
              </tr>
              <tr>
                <td><label for="fname">Bitiş:</label></td>
                <td><input type="text" id="end" name="sname" value="300"></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td><button id="myBtn" onclick="updateCanvas()">Draw</button></td>
              </tr>
            </tbody>
          </table>
            
<script src="canvas.js"></script>
        </div>
        
        
    </body>
</html>

Canvas putimagedata 有时无法按预期绘制

Canvas putimagedata is sometimes not drawing like expected

html

javascript

putimagedata