Question

我有一个创建布局的项目，我决定使用canvas元素。我创建了一个需要4个args的函数。

   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();


}

我有几个画布元素，所以我想在不同的区域创建这个border-radius框。我假设这样的调用：

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

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

但这似乎不起作用。任何人都可以指出我的错误。

Answer 1

将它放在<script>块中应该可以解决问题：

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

另请注意，您的fillArc()函数定义（或您可能拥有的任何其他可执行JavaScript）也应位于<script>块中。

Answer 2

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

当然，只有在您拨打canv.getContext()后才能这样做。

您还需要：

使用正确的ID - 当它应该是具有该名称的变量时，您已使用"camvas"
将您的JS放在<script>标记

即：

<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>

Answer 3

嗯，有一些事情：

您永远不会使用camvas变量。
您总是引用#camvas。
在将canv.beginPath()设置为任何内容之前，请致电canv。
画布中的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();
}

和

<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>

Answer 4

的 jsFiddle Demo 的

将您的函数及其调用放在script元素中

传入一个字符串，该字符串与您要绘制的画布的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>

无法在javascript中调用绘图功能

4 个答案: