我试着从画布的左中心到右边画一条简单的直线.起点和终点将取自文本框输入.要做到这一点，我首先画一条线，从开始到结束与画布相同的html colored颜色 ，以删除之前的行，然后绘制新的行.然而，我的行为越来越不一致.有时它在绘制输入坐标，有时它不是.我可能做错了什么？
以下是我的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> </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> </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为例，它运行良好.