问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

canvas 绘制路径重叠的问题

头像
可可乐滋滋
    3581616

    在填充绘制路径时，getContext.fill()方法有两个参数，当为'evenodd'时，重叠的部分去掉，为啥在我这里不行，请问如何修改呢？

    <canvas id=c></canvas>
<script>
    var w = c.width = window.innerWidth,
        h = c.height = window.innerHeight,
        ctx = c.getContext('2d'),
        offset = 0;
        points = [];
    function smoothLine(points) {
        ctx.fillStyle="red";
        ctx.fill('evenodd');    //  主要是这里；
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#eee';
        ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y);
        ctx.setLineDash([5, 4, 3]);
        march();
        ctx.lineDashOffset = offset;
        ctx.stroke();
        
    }
    function march() {
        offset++;
        if (offset > 15) {
            offset = 0;
        }
        setTimeout(march, 20);
    }
    c.onmousedown = function (e) {
        points.push({x: e.clientX, y: e.clientY});
        ctx.fill('evenodd');
        c.onmousemove = function (e) {
            points.push({x: e.clientX, y: e.clientY});
            smoothLine(points);
        };
        c.onmouseup = function () {
            ctx.closePath()
            c.onmousemove = null;
            c.onmouseup = null;
        };
    };
</script>
    canvasjavascript
    阅读 3.4k
    1 个回答
    得票最新
    头像
    NickWang
      1.3k1113

      是对“路径填充”这件事的理解问题。路径绘制其实包含开始路径绘制，路径绘制，结束路径绘制三个状态的，而每次执行fill之后相当于结束路径绘制了。
      fill('evenodd')是在单次填充时候进行重叠对消，但是本次fill并不会再对上一次fill的结果进行修改的。
      正确代码

      <!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,10);
ctx.lineTo(300,150);
ctx.lineTo(300,0);
ctx.lineTo(0,150);
ctx.lineTo(10,150);
ctx.lineTo(300,10);
ctx.stroke();
ctx.fill('evenodd');

</script>

</body>
</html>

      但是以下代码中间打断了路径，效果就不一样了。

      <!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,10);
ctx.lineTo(300,150);
ctx.lineTo(300,0);
ctx.fill('evenodd');
ctx.beginPath();
ctx.moveTo(300,0);
ctx.lineTo(0,150);
ctx.lineTo(10,150);
ctx.lineTo(300,10);
ctx.fill('evenodd');

</script>

</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏