0

有一个角色，我想画它。路径是正确的，但填充不正确。看图片（1.是预期的，2.是我得到的）：

字母，重叠区域未填充和填充

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

我怎样才能让它工作？

用中风（5px红色）：

在此处输入图像描述

4

1 回答 1

0

使用 context.stroke() 而不是 context.fill()

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 回答