怎样填充一个闭合区域

比如一个三角形边框, 如果想要填充其内部, 则需要使用: ctx.fill()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <canvas id="canv" width="300" height="300"></canvas>
    <script>
        function draw() {
            var canvas = document.getElementById('canv');
            if (!canvas.getContext) return;
            var ctx = canvas.getContext("2d");
            // 开启路径绘制
            ctx.beginPath();
            // 确定路径起点
            ctx.moveTo(30, 30);
            // 绘制路径
            ctx.lineTo(280, 280);
            // 绘制路径
            ctx.lineTo(280, 30);
            // 结束路径绘制, 与ctx.beginPath()相连
            ctx.closePath();
            // ctx.fill()会自动闭合路径, 并将内部填充
            ctx.fill()
        }
        draw();
    </script>
</body>

</html>

 

 

注意: 如果路径没有闭合, 那ctx.fill()会先闭合再填充.

 

posted on 2019-09-23 09:07  aisowe  阅读(340)  评论(0)  编辑  收藏  举报

导航