1

我有一个创建布局的项目，我决定用画布元素来做。我创建了一个需要 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>

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

4

4 回答 4

0

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

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

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

于 2013-04-12T10:16:29.607 回答
0

您需要更改.beginPath()and.closePath()调用，以便将它们应用于context，而不是canvas。

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

您还需要：

  1. 使用正确的 ID - 你"camvas"在它应该是具有该名称的变量时使用过
  2. 把你的 JS 放在<script>标签里面

IE：

<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>
于 2013-04-12T10:17:59.647 回答
0

嗯，有几件事：

  1. 你永远不会使用camvas变量。
  2. 你总是指#camvas.
  3. 你canv.beginPath()在设置canv任何东西之前打电话。
  4. 您在画布中的 javascript 代码不在脚本标签中
  5. 您在 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>
于 2013-04-12T10:18:08.837 回答
0

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>
    • 于 2013-04-12T10:23:09.243 回答