Javascript，绘制字符串，画布

Javascript, drawing a tringle, canvas

本文关键字：画布 字符串 绘制 Javascript      更新时间：2024-01-29

我也问过类似的问题，一些善良的灵魂试图提供帮助，但不幸失败了。

老师给我布置了一项作业；我要从html表单中收集数据，然后使用给定的坐标打印字符串。不幸的是，我的代码不起作用，我不知道错误在哪里。有什么想法吗？顺便说一句，这是我的第一个JS程序，所以请原谅我的不完美。

这是代码：https://jsfiddle.net/n07engyt/4/

    function draw() 
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wierzcholekX1')
        var canvas = document.getElementById("canvas1");
        var ctx = canvas.getContext("2d"); 
        ctx.beginPath();
        //ctx.moveTo(100,50);
        ctx.moveTo(testX1(), testY1());
        //ctx.lineTo(130, 100);
        ctx.lineTo(testX2(), testY2());
        ctx.lineTo(testX3(), testY3());
        //ctx.lineTo(70, 100);
        ctx.fillStyle = "rgba(0,0,0,1)";
        ctx.fill();
    }

    function testX1()
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wX1')
        return coordinate.value;
    }
    function testX2()
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wX2')
        return coordinate.value;
    }
    function testX3())
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wX3')
        return coordinate.value;
    }
    function testY1()
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wY1')
        return coordinate.value;
    }
    function testY2()
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wY2')
        return coordinate.value;
    }
    function testY3()
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wY3')
        return coordinate.value;
    }

    function write_coordinate(){
        draw();
    }

我还有一个问题；有更好的方法吗？喜欢更优雅的不是通过对每个顶点使用分离函数？

使用一个函数来获取对象中的所有点会更好。如果你使用表单，你不必写document.getElement..等。这里有一个例子，我相信这将是一个巧妙的解决方案

function getCoordinates() {
  return{
    x1:Number(cordinates.x1.value),
    y1:Number(cordinates.y1.value),
    x2:Number(cordinates.x2.value),
    y2:Number(cordinates.y2.value),
    x3:Number(cordinates.x3.value),
    y3:Number(cordinates.y3.value)
  }
}
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var p = getCoordinates();
    ctx.fillStyle="#A2322E";
    console.log(p)
    ctx.beginPath();
    
    ctx.moveTo(p["x1"],p["y1"]);
    ctx.lineTo(p["x2"],p["y2"]);
    ctx.lineTo(p["x3"],p["y3"]);
    ctx.closePath();
    ctx.fill();
  }
}
#canvas{
  border:2px solid #666;
}
<form name="cordinates">
  <div>
    <input name="x1" type=text placeholder="x1" value="70">
    <input name="y1" type=text placeholder="y1" value="50">
  </div>
  <div>
    <input name="x2" type=text placeholder="x2" value="100">
    <input name="y2" type=text placeholder="y2" value="75">
  </div>
  <div>
    <input name="x3" type=text placeholder="x3" value="100">
    <input name="y3" type=text placeholder="y3" value="25">
  </div>
</form>
<button onclick="draw()">draw</button><br/>
<canvas id="canvas" width="400" height="400"></canvas>

查看控制台，您将看到问题。。。

提示：额外的)

试试这个：

function draw() 
{
    var canvas = document.getElementById("canvas1");
    var ctx = canvas.getContext("2d"); 
    ctx.beginPath();
    //ctx.moveTo(100,50);
    ctx.moveTo(getElementValue('wierzcholekX1'), getElementValue('wierzcholekY1'));
    //ctx.lineTo(130, 100);
    ctx.lineTo(getElementValue('wierzcholekX2'), getElementValue('wierzcholekY2'));
    ctx.lineTo(getElementValue('wierzcholekX3'), getElementValue('wierzcholekY3'));
    //ctx.lineTo(70, 100);
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.fill();
}
function getElementValue(inputID)
{
    return document.getElementById(inputID).value;
}
function write_coordinate()
{
  draw();
}

JSFiddle链接

相关文章：