七巧板实例

function canvas1(){
    var canvas1 = document.getElementById("canvas1");
    var context1 = canvas1.getContext("2d");
    canvas1.width = 500;
    canvas1.height = 500;
    var arr = [
        {p:[{x:0,y:0},{x:0,y:500},{x:250,y:250},{x:0,y:0}],c:'#003333'},
        {p:[{x:0,y:0},{x:500,y:0},{x:250,y:250},{x:0,y:0}],c:'#003366'},
        {p:[{x:0,y:500},{x:250,y:500},{x:125,y:375},{x:0,y:500}],c:'#336666'},
        {p:[{x:250,y:500},{x:375,y:375},{x:250,y:250},{x:125,y:375},{x:250,y:500}],c:'#0066cc'},
        {p:[{x:250,y:500},{x:500,y:500},{x:500,y:250},{x:250,y:500}],c:'#99cccc'},
        {p:[{x:250,y:250},{x:375,y:375},{x:375,y:125},{x:250,y:250}],c:'#006699'},
        {p:[{x:375,y:375},{x:500,y:250},{x:500,y:0},{x:375,y:125},{x:375,y:375}],c:'#0066ff'},
        ];
    for(i = 0; i < arr.length; i++ ){
        context1.beginPath()
        context1.moveTo(arr[i]['p'][0]['x'],arr[i]['p'][0]['y']);
        for(j = 1; j < arr[i]['p'].length; j++){
            context1.lineTo(arr[i]['p'][j]['x'],arr[i]['p'][j]['y']);
            }
        context1.closePath();
        context1.fillStyle = arr[i]['c'];
        context1.fill();
        }
    }