Javascript 将与数组匹配的用户输入绘制到画布上
编辑：这是与jQuery无关的javascript jQuery的新功能，因此这可能是基本功能。如果用户输入的字符串与数组中的元素匹配，我将尝试使用jquery在画布元素上绘制。以下是我所拥有的：Javascript 将与数组匹配的用户输入绘制到画布上,javascript,html,canvas,Javascript,Html,Canvas,编辑：这是与jQuery无关的javascript jQuery的新功能，因此这可能是基本功能。如果用户输入的字符串与数组中的元素匹配，我将尝试使用jquery在画布元素上绘制。以下是我所拥有的： <body> <canvas id="c4" width="300px" height="200px" style="border:1px solid black">Not supported</canvas> <script> //main
<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函数
函数绘图（）{
var c=document.getElementById（“c4”）；
if（canvas.getContext）{
var ctx=c.getContext（'2d'）；
ctx.fillStyle=“浅灰色”；
//（x，y，值）
ctx.fillRect（0,0300200）；
//（x，y）（20,15）是起点
ctx.moveTo（20,15）；
ctx.lineTo（20120）；
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=“黑色”；
ctx.fill（）；
ctx.moveTo（20120）；
ctx.lineTo（65120）；
ctx.stroke（）；
ctx.moveTo（20,40）；
ctx.lineTo（40,15）；
ctx.stroke（）；
}
}
$
函数myJsFunction（）{
//稍后添加此项
}
任何帮助都将不胜感激。一个简短的摘要作为答案：
- 您的代码中绝对没有jQuery
- 您正在名为
的函数中定义绘图操作。必须调用此函数才能使其绘制draw（） - 每次笔划操作后都需要使用
，否则下次调用stroke（）时将绘制旧路径以及调用stroke（）后添加的新路径beginPath（）
draw（）