Canvas：绘制线和填充多边形

绘制线和填充多边形

1.绘制线段的API是上下文对象的方法；

2.beginPath：开始定义一条新的路径；

3.moveTo：开始定义一条新的子路径，该方法确定了线段的起点；

4.lineTo：将上面定义的线段起点和指定的新的点连接起来；

5.到这里只是规划好了思路，还没有在画布上画出任何图形；

6.fill()：填充区域，此时只是填充，起点和终点并没有连接起来；

7.closePath：会把起点和终点连接起来；

8.stroke()：开始绘制图形，当前路径下的所有子路径都会绘制出来；

9.如果要接着绘制新的路径，记得调用beginPath()方法；

实例：

　　　　　 <style>

#box{

border: 1px gray solid;

}

</style>

</canvas>


var canvas=document.querySelector("#box")
var pen=canvas.getContext("2d")
pen.moveTo(100,200)
pen.lineTo(400,400)
pen.stroke()

实例2：

var canvas=document.querySelector("#box")
var pen=canvas.getContext("2d")
pen.moveTo(100,200)
pen.lineTo(400,400)
pen.lineTo(400,300)
//  pen.fill()
pen.stroke()

打开注释后：

* fill()自动填充是黑色，没有闭合的边也会自动闭合

心电图：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <style>
        #box {
            border: 1px gray solid;
        }
    </style>
    <canvas id="box" width="600" height="600">
    </canvas>
    <script>
        var canvas = document.querySelector('#box')
        var ctx = canvas.getContext("2d")



        var x = 60
        var arr = []
        setInterval(() => {
            arr.push(Math.random() * (320 - 10) + 10);

        })
        setInterval(() => {
            //清除画板
            canvas.width = 600
            x -= (30 / (1000 / 300))
            drawori()
            draw()
        }, 300)

        function draw() {
            //开启另外套轨迹
            ctx.beginPath()
            ctx.lineWidth = 1
            ctx.strokeStyle = "black"
            for (let i = 0; i < arr.length; i++) {
                if (i * 30 + x < -30) { continue }
                ctx.lineTo(i * 30 + x, 400 - arr[i])
            }
            ctx.stroke()
        }
        function drawori() {
            ctx.strokeStyle = 'gray'
            ctx.moveTo(0, 300)
            ctx.lineTo(600, 300)
            ctx.stroke()
        }



    </script>
</body>

</html>

效果图：

posted on 2022-07-24 09:40 香香鲲阅读(753) 评论(0) 收藏举报