我只是用html输入和画布绘制了三行。但我想用putimagedata方法画两个，用stroke方法画另一个。
如果我在用putimagedata方法绘制之后使用stroke，则笔画不出任何东西。它绘制的唯一方法是如果我把stroke方法放在getimagedata方法之前。
这两个是相互冲突的还是我做错了什么?
这是我的js代码:
function updateCanvas() {
var startTime = performance.now()
var first = document.querySelector('input[name="first"]:checked').value;
var second = document.querySelector('input[name="second"]:checked').value;
var canvas = document.getElementById("canvas");
var start = parseInt(document.getElementById("start").value);
var end = parseInt(document.getElementById("end").value);
var byuk = parseInt(document.getElementById("byuk").value);
var syuk = parseInt(document.getElementById("syuk").value);
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext("2d");
// THIS IS THE PLACE IT WORKS
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.moveTo(0, 200 + byuk);
ctx.lineTo(399, 200 + syuk);
ctx.stroke();
//
var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
function drawPixel(x, y, r, g, b, a) {
var index = (x + y * canvasWidth) * 4;
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, 50, 50, 50, 255);
}
if (start == end) {
// THIS IS THE PLACE IT DOESNT DRAW EVEN IF STATEMENT WORKS
//
var y = 200;
for (var i = 0; i <= byuk; i++) {
drawPixel(0, y, 255, 0, 0, 255);
y++;
}
var y2 = 200;
for (var i = 0; i <= syuk; i++) {
drawPixel(399, y2, 255, 0, 0, 255);
y2++;
}
}
ctx.putImageData(canvasData, 0, 0);
var endTime = performance.now()
console.log(`Call to doSomething took ${endTime - startTime} milliseconds`)
}body {
background-color: #F7B054;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
#canvas{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="./css/cizim.css" />
<title>Line</title>
</head>
<body>
<table align="center" width="1200" border="0">
<tbody>
<tr>
<td width="500"><div align="center"><canvas width ="400" height="400" id="canvas" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.
</canvas>
<script src="canvas.js"></script>
</td>
<td><table>
<tbody>
<tr>
<td><label for="fname">Başlangıç Mesneti:</label></td>
<td>
<input type="radio" id="msm" name="first" value="msm" checked="checked">
<label for="css">Mafsallı Sabit Mesnet</label>
<input type="radio" id="mhm" name="first" value="mhm">
<label for="javascript">Mafsallı Hareketli Mesnet</label>
<input type="radio" id="ank" name="first" value="ank">
<label for="html">Ankastre Mesnet</label>
</td>
</tr>
<tr>
<td><label for="fname">Bitiş Mesneti:</label></td>
<td>
<input type="radio" id="msm" name="second" value="msm" checked="checked">
<label for="css">Mafsallı Sabit Mesnet</label>
<input type="radio" id="mhm" name="second" value="mhm">
<label for="javascript">Mafsallı Hareketli Mesnet</label>
<input type="radio" id="ank" name="second" value="ank">
<label for="html">Ankastre Mesnet</label>
</td>
</td>
</tr>
<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><label for="fname">Başlangıç Yükü:</label></td>
<td><input type="text" id="byuk" name="sname"></td>
</tr>
</tr>
<tr>
<td><label for="fname">Bitiş Yükü:</label></td>
<td><input type="text" id="syuk" name="sname"></td>
</tr>
<tr>
<td> </td>
<td><button id="myBtn" onclick="updateCanvas()">Hesapla</button></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div align="center">
<script src="canvas.js"></script>
</div>
</body>
</html>Thanks in Advance.
在Bravo和msbit的帮助下，我找到了问题所在。我没有完全理解getimagedata和putimagedata的逻辑。在移动冲程后，它开始在if语句中工作。我不知道putimagedata会覆盖笔画命令。谢谢你。