用用户输入在Canvas中绘制一条线

Drawing a line in Canvas with user input

本文关键字：绘制 一条 Canvas 用户 输入      更新时间：2023-09-26

当用户给出X和Y坐标时，我试图在Canvas中画一条线。这是我目前得到的。我可以得到画布和输入框但它不会画出来。我是个新手，任何建议都很感谢。

<script> 
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var x1 = document.getElementById("x1").value;
var x2 = document.getElementById("x2").value;
var y1 = document.getElementById("y1").value;
var y2 = document.getElementById("y2").value;

function draw(){
context.beginPath();
context.moveTo(x1.value,y1.value);
context.lineTo(x2.value,y2.value);
context.stroke();
}
</script>
<br><br>
<h1>Draw a Line</h1>
X-coordinate 1 <input type="text" id="start_x"><br><br>
Y-coordinate 1<input type="text" id="start_y"><br><br>
X-coordinate 2<input type="text" id="end_x"><br><br>
Y-coordinate 2<input type="text" id="end_y"><br><br>
<input type="button" value="draw" onclick="draw()">

它给你undefined因为你设置你的输入id为start_x start_y end_x end_y在你的js中你得到的值为x1 x2 y1 y2

html 

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
</canvas>
<h1>Draw a Line</h1>
<form>
    X-coordinate 1 <input type="text" id="start_x"><br><br>
    Y-coordinate 1<input type="text" id="start_y"><br><br>
    X-coordinate 2<input type="text" id="end_x"><br><br>
    Y-coordinate 2<input type="text" id="end_y"><br><br>
    <input type="button" value="draw" onclick="draw()">
 </form>

js 

 function draw(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var x1 = document.getElementById("start_x").value;
        var x2 = document.getElementById("start_y").value;
        var y1 = document.getElementById("end_x").value;
        var y2 = document.getElementById("end_y").value;
        context.beginPath();
        context.moveTo(x1,x2);
        context.lineTo(y1,y2);
        context.stroke();
    }

这样重写你的代码;

<canvas width="300" height="300" id="myCanvas"></canvas><br /><br />
X-coordinate 1<input type="text" id="x1"><br><br>
Y-coordinate 1<input type="text" id="y1"><br><br>
X-coordinate 2<input type="text" id="x2"><br><br>
Y-coordinate 2<input type="text" id="y2"><br><br>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');    
function draw(){
    var x1 = document.getElementById("x1").value;
    var x2 = document.getElementById("x2").value;
    var y1 = document.getElementById("y1").value;
    var y2 = document.getElementById("y2").value;
    context.beginPath();
    context.strokeStyle="#FF0000";
    context.moveTo(x1,y1);
    context.lineTo(x2,y2);
    context.stroke();
}
</script>
<br><br>
<h1>Draw a Line</h1>
<input type="button" value="draw" onclick="draw()">

您的draw函数称为onclick，但该函数使用input value设置为'未定义'，因为当窗口加载input的值时未定义，要解决这个问题，您应该包括您在draw函数中获取这些值的代码。

相关文章：