无法在javascript中调用draw函数

我有一个创建布局的项目，我决定用canvas元素来创建它。我创建了一个包含4个参数的函数

   function fillArc(camvas,x,y,w,h)
{
canv.beginPath();
    var canv = document.getElementById("camvas");
    var context = canv.getContext('2d');
    context.strokeStyle="#FFFFFF";
    context.moveTo(x+5,y);
    context.lineTo(w-5,y);
    context.quadraticCurveTo(w,y,w,y+5);
    context.lineTo(w,h-5);
    context.quadraticCurveTo(w,h,w-5,h);
    context.lineTo(x+5,h);  
    context.quadraticCurveTo(x,h,x,h-5);
    context.lineTo(x,y+5);
    context.quadraticCurveTo(x,y,x+5,y);
    context.stroke();
canv.closePath();


}

我有几个画布元素，所以我想在不同区域创建这个边界半径框。我假设调用如下：

<canvas width="500" height="500" id="canvaslayouts">
</canvas>

<script>
fillArc(canvaslayouts,10,10,50,50);
</script>

但这似乎不起作用。有人能指出我的错误吗。

把它放在一个方块里就可以了：

<canvas width="500" height="500" id="canvaslayouts"></canvas>
<script>
fillArc(canvaslayouts,10,10,50,50);
</script>

另外，请注意，fillArc函数定义或您可能拥有的任何其他可执行JavaScript也应位于块中。

您需要更改.beginPath和.closePath调用，以便将它们应用于上下文，而不是画布

当然，只有在调用了canv.getContext之后才能完成

您还需要：

使用正确的ID-当它应该是具有该名称的变量时，您已经使用了camvas 把你的JS放在标签里 i、 e:

嗯，有几件事：

您从未使用过camvas变量。 你总是提到卡姆瓦斯。 在将canv设置为任何值之前，调用canv.beginPath。 画布中的javascript代码不在脚本标记中 canvas标记中的javascript代码使用canvaslayouts作为第一个参数调用函数。这意味着您正在搜索名为canvaslayouts的变量，而不是ID。将其更改为canvaslayouts以指定它是要在getElementById中使用的字符串。 正确的代码应该如下所示：

function fillArc(camvas,x,y,w,h)
{
    //Changed to use the variable instead, and moved it to the start
    var canv = document.getElementById(camvas); 
    canv.beginPath();
        var context = canv.getContext('2d');
        context.strokeStyle="#FFFFFF";
        context.moveTo(x+5,y);
        context.lineTo(w-5,y);
        context.quadraticCurveTo(w,y,w,y+5);
        context.lineTo(w,h-5);
        context.quadraticCurveTo(w,h,w-5,h);
        context.lineTo(x+5,h);  
        context.quadraticCurveTo(x,h,x,h-5);
        context.lineTo(x,y+5);
        context.quadraticCurveTo(x,y,x+5,y);
        context.stroke();
    canv.closePath();
}

及

将函数及其调用放在脚本元素中 传入与要绘制的画布id匹配的字符串 使用上下文而不是画布来访问图形API

<script>
function fillArc(camvas,x,y,w,h)
{
var canv = document.getElementById(camvas);
var context = canv.getContext('2d');
context.beginPath();
context.strokeStyle="#ffffff";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);  
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.stroke();
context.closePath();
}
fillArc("canvaslayouts",10,10,50,50);
</script>

---

我更改了.beginPath和.closePath。我试图在main.js文件中或在元素下调用此函数，但这两个函数都不起作用。此代码中的beginPath和closePath行仍然不正确。事实上，如果上一次绘图操作将光标留在最初开始的位置，甚至不需要closePath。@Alnitak我不知道这一点。我以前从未亲自使用过canvas，我所解释的只是一般的javascript/DOM操作。我感谢您的意见，我希望如果有人搜索类似的情况并查看此答案，他们也会查看您的评论以获取更多信息。

<canvas width="500" height="500" id="canvaslayouts">
    <script type="text/javascript">
        //Use a script container
        fillArc("canvaslayouts",10,10,50,50); //Use a string, not a variable
    </script>
</canvas>

<script>
function fillArc(camvas,x,y,w,h)
{
var canv = document.getElementById(camvas);
var context = canv.getContext('2d');
context.beginPath();
context.strokeStyle="#ffffff";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);  
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.stroke();
context.closePath();
}
fillArc("canvaslayouts",10,10,50,50);
</script>