Canvas：绘制线和填充多边形
绘制线和填充多边形
1.绘制线段的API是上下文对象的方法；
2.beginPath：开始定义一条新的路径；
4.lineTo：将上面定义的线段起点和指定的新的点连接起来；
5.到这里只是规划好了思路，还没有在画布上画出任何图形；
6.fill()：填充区域，此时只是填充，起点和终点并没有连接起来；
7.closePath：会把起点和终点连接起来；
8.stroke()：开始绘制图形，当前路径下的所有子路径都会绘制出来；
9.如果要接着绘制新的路径，记得调用beginPath()方法；
实例：
<style>
#box{
border: 1px gray solid;
}
</style>
<canvas id="box" width="600" height="600">
</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>
效果图：
