javascript - 无法在 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 元素，所以我想在不同的区域创建这个边框半径框。我假设这样的调用:

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

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

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

Answer 1

jsFiddle Demo

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

传入一个与您要绘制的 Canvas 的 id 相匹配的字符串

使用上下文而不是 Canvas 来访问绘图 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>