无法在javascript中调用绘图函数

Question

我有一个创建布局的项目，我已经决定用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>

但这似乎没有work.Can任何人指出我的错误，请。

Answer 1

​

• 将您的函数和对它的调用放在一个script元素中
• 传递一个字符串，该字符串与您希望在
• 上绘制的画布的id相匹配
• 使用上下文而不是画布访问绘图

Answer 2

将其放在<script>块中应该可以做到这一点：

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

还要注意，您的fillArc()函数定义(或您可能拥有的任何其他可执行JavaScript )也应该在<script>块中。

Answer 3

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

当然，这只能在调用了canv.getContext()之后才能完成。

您还需要：

1. 使用正确的ID -您使用了"camvas"，而它应该是同名的变量
2. 将JS放入<script> tags

中

即：

<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.closePath();  // NB: close the path before you stroke it
    context.stroke();
}
</script>

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