获取与数组匹配的用户输入以绘制到画布上

Taking user input matched to an array to draw onto canvas

本文关键字：绘制 输入 用户 数组 获取      更新时间：2023-09-26

EDIT：这是javascript，与jQuery无关。

jQuery是新的，所以这可能是基本的。我尝试使用 jquery 绘制到我的画布元素上，如果用户输入的字符串与我的数组中的元素匹配。这是我所拥有的：

<body>
<canvas id="c4" width="300px" height="200px" style="border:1px solid black">Not supported</canvas>
<script>
    //main problem having is simply defining the jQuery function correctly
    function draw(){
        var c = document.getElementById("c4");
        if (canvas.getContext){
        var ctx = c.getContext('2d');
        ctx.fillStyle = "lightgrey";
                    //(x,y,values)
        ctx.fillRect(0,0,300,200);
                // (x, y) (20,15) is starting point
        ctx.moveTo(20,15);
        ctx.lineTo(20,120);

        ctx.moveTo(20,15);
        ctx.lineTo(100,15);

        ctx.moveTo(100,15);
        ctx.lineTo(100,45);
        ctx.stroke();

        ctx.moveTo(100,45);
        ctx.arc(99,50,8,0,2*Math.PI);
        ctx.fillStyle = "black";
        ctx.fill();
        ctx.moveTo(20,120);
        ctx.lineTo(65,120);
        ctx.stroke();
        ctx.moveTo(20,40);
        ctx.lineTo(40,15);
        ctx.stroke();
    }
    }               
</script>
    <input type="text" id="input1">
    <button onclick="myJsFunction()">$</button>
        <script>
         function myJsFunction(){
             // adding this in later
         }
        </script>

任何帮助将不胜感激。

简短的摘要作为答案：

  • 你的代码中绝对没有jQuery。
  • 您正在名为 draw() 的函数中定义绘制操作。必须调用此函数才能使其绘制。
  • 您需要在每次笔画操作后使用beginPath()，否则下次调用 stroke（） 时将绘制旧路径以及调用 stroke 后添加的新路径。
相关文章：