无法在JavaScript中调用绘图功能

Question

I have a project creating layouts and i have decided to do it with canvas element.I created a function that takes 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();


}

I have several canvas elements so i want to create this border-radius box in different areas.I assumed that a call like:

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

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

But this doesn't seem to work.Can anyone point my mistake please.

Answer 1

Putting it in a <script> block should do the trick:

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

Also, note that your fillArc() function definition (or any other executable JavaScript that you may have) should also be in a <script> block.

Answer 2

You need to change the .beginPath() and .closePath() calls so that they're applied to the context , and not to the canvas .

That can of course only be done once you've called canv.getContext() .

You also need to:

1. use the correct ID - you've used "camvas" when it should be the variable with that name
2. put your JS inside <script> tags

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>    

Answer 3

Well, a few things:

1. You're never using the camvas variable.
2. You're always refering to #camvas .
3. You call canv.beginPath() before setting canv to anything.
4. Your javascript code in the canvas is not in script tags
5. Your javascript code in the canvas tag calls the function with canvaslayouts as the first parameter. This means you're searching for a variable named "canvaslayouts" and not an ID. Change it to "canvaslayouts" to specify that it's a string to be used in getElementById .

The correct code should be something like this:

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

and

<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

Place your function and the call to it in a script element

Pass in a string which matches the id of the canvas you wish to draw on

Use the context, not the canvas, to access the drawing 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>