1

レイアウトを作成するプロジェクトがあり、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>

しかし、これはうまくいかないようです。誰かが私の間違いを指摘してください。

4

4 に答える 4

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 に答える