多边形着色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
</style>
</head>
<body>
<canvas id="canvas1" width="1000" height="600"
style="border:1px solid #aaa;display:block;margin:50px auto">当前浏览器不支持canva，请更换浏览器后再试
</canvas>
<script>
window.onload = function () {
var canvas1 = document.getElementById('canvas1');
var context = canvas1.getContext('2d');
// 语句判断当前浏览器是否支持canvas
if (
canvas1.getContext("2d")
) {
var context = canvas1.getContext("2d")
// 绘制状态：位置、宽度、样式、着色
// (x,y):以画布的左侧为原点，x右侧为正，y向下为正
// 1.位置
context.moveTo(100, 100)
context.lineTo(400, 400)
context.lineTo(300, 100)
context.lineTo(100, 100)//回到一开始的位置，就绘制成了多边形
// 着色：
context.fillStyle = "rgb(2,100,30)"
context.fill()
context.stroke()
} else {
alert("当前浏览器不支持canvas，请更换浏览器再试")
}
}
</script>
</body>
</html>