<!DOCTYPE html>
<html>
<canvas id="diag" height="200" width="200" style="border:1px solid">update your</canvas>
<canvas id="diag2" height="200" width="200" style="border:1px solid">update your</canvas>
</html>
<script>
position = [
{p:[{x:0, y:0}, {x:800, y:0}, {x:400, y:400}], color:"#cfff67"},
{p:[{x:0, y:0}, {x:400, y:400}, {x:0, y:800}], color:"#67becf"},
{p:[{x:800, y:0}, {x:800, y:400}, {x:600, y:600}, {x:600, y:200}], color:"#6fbfcf"},
{p:[{x:600, y:200}, {x:600, y:600}, {x:400, y:400}], color:"#6eefcf"},
{p:[{x:400, y:400}, {x:600, y:600}, {x:400, y:800}, {x:200, y:600}], color:"#abe"},
{p:[{x:200, y:600}, {x:400, y:800}, {x:0, y:800}], color:"#eab"},
{p:[{x:800, y:400}, {x:800, y:800}, {x:400, y:800}], color:"#6e9ec9"},
]
var canvas = document.getElementById(‘diag‘); //huo
var context = canvas.getContext(‘2d‘); //获取canvas上下环境
canvas.width = ‘800‘;
canvas.height = ‘800‘;
for(i=0; i<position.length; i++) {
draw(position[i], context)
}
function draw(pe, context) {
context.beginPath();
context.moveTo(pe.p[0].x, pe.p[0].y);
console.log(pe.p.length);
// return;
for (var i = 1; i < pe.p.length; i++) {
// console.log(pe.p)
context.lineTo(pe.p[i].x, pe.p[i].y)
};
context.closePath();
context.fillStyle=pe.color;
context.fill()
}
</script>
原文：http://www.cnblogs.com/agang-php/p/4822849.html