0

キャラがいて描いてみたいです。パスは正しいですが、塗りつぶしがありません。写真を見てください（1.は予想され、2.は私が得たものです）：

文字、重なり部分の塗りつぶしなしと塗りつぶし

  c.beginPath();
  //draw curves
  c.closePath();
  c.fill();

どうすればそれを機能させることができますか？

ストロークあり (5px 赤):

ここに画像の説明を入力

4

1 に答える 1

0

context.fill() の代わりに context.stroke() を使用する

stroke() はシェイプの内側を塗りつぶします。

fill() は、シェイプの外側にストロークを描画します。

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/ZZD47/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        // draw the inside fill of a circle
        ctx.beginPath();
        ctx.arc(100, 100, 50, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'blue';
        ctx.fill();

        // draw the outside stroke of a circle
        ctx.beginPath();
        ctx.arc(250, 100, 50, 0, 2 * Math.PI, false);
        ctx.lineWidth = 5;
        ctx.strokeStyle = 'red';
        ctx.stroke();

    }); // end $(function(){});
</script>

</head>

<body>
  <canvas id="canvas" width=400 height=200></canvas>
</body>
</html>
于 2013-03-01T04:47:56.433 に答える