Question

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

letters, overlapping area non-filled and filled

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

我怎样才能让它发挥作用？

中风（5px红色）：

enter image description here

Answer 1

使用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>

填充字形内的不需要的区域

1 个答案: