以HTML5畫CropCircle---外星切派法

這個麥田圈像不像切好的派或披薩,原本Jimmy's papa以為不過就是畫個派而已,哪知道怎麼試就是畫不出來,原本以為只將黑派白派跟圈圈作互斥或(xor)合成運算,就會黑的變白的,白的變黑的,但結果不管黑白統統被蓋掉是變成了白圈圈,幸好Jimmy's papa冰雪聰明找到了解決的方法,不過過程有點複雜,很難解釋給Jimmy小朋友他爸爸是怎麼做到的,或許就說這是外星人切派法吧!!
對了,要看到完整的麥田圈需要直接點入這篇文章才可
Your browser does not support the canvas element.

<script type="text/javascript">
<!--


function drawPie(context,centerX,centerY,radius,startingAngle, 
    endingAngle, antiClockwise,fillStyle,globalCompositeOperation)
{
    context.globalCompositeOperation = globalCompositeOperation;
        context.beginPath();
    context.arc(centerX,centerY,radius,startingAngle, endingAngle,antiClockwise);
        context.lineTo(centerX, centerY);
    context.closePath();
 
    context.lineWidth=1;
    context.fillStyle=fillStyle;
    context.fill();
}

function drawBlackPie(context,centerX,centerY,radius,startingAngle, 
    endingAngle, antiClockwise,fillStyle,globalCompositeOperation)
{

    drawPie(context,centerX,centerY,radius,startingAngle, 
    endingAngle, antiClockwise,fillStyle,globalCompositeOperation);
    drawPie(context,centerX,centerY,radius,startingAngle, 
    endingAngle, antiClockwise,fillStyle,globalCompositeOperation);
    drawPie(context,centerX,centerY,radius*0.95,startingAngle, 
    endingAngle, antiClockwise,fillStyle,globalCompositeOperation);
}

function drawWhitePie(context,centerX,centerY,radius,startingAngle, 
    endingAngle, antiClockwise,fillStyle,globalCompositeOperation)
{

    drawPie(context,centerX,centerY,radius,startingAngle, 
    endingAngle, antiClockwise,fillStyle,globalCompositeOperation);
    drawPie(context,centerX,centerY,radius*0.95,startingAngle, 
    endingAngle, antiClockwise,fillStyle,globalCompositeOperation);
    
}

    var canvas=document.getElementById("myCropCircle0420");
    var context=canvas.getContext("2d");
 
    var centerX = 150;
    var centerY = 150;
    var radius = 150;
    //var lineWidth = 1;
 
    


    context.beginPath();        
    context.arc(centerX,centerY,radius,0, 2*Math.PI,false);
 
    context.fillStyle="white";
    context.fill();
    context.lineWidth=2;
    context.strokeStyle="black"; 
    context.stroke();



    var i=0;
    while (i<18)
    {
      drawBlackPie(context,centerX,centerY,radius,Math.PI*(1.5+i/9),Math.PI*(1.5+(++i)/9),false,'black','xor');
      drawWhitePie(context,centerX,centerY,radius,Math.PI*(1.5+i/9), Math.PI*(1.5+(++i)/9),false,'black','xor');
    }


    var dbb=setTimeout("drawPie(context,centerX,centerY*3/8,radius/3.2,0, Math.PI*2,false,'black','xor')",1000);
    var dbb=setTimeout("drawPie(context,centerX,centerY*4/3,radius/1.7,0, Math.PI*2,false,'black','xor')",1500);
    var llb=setTimeout("drawPie(context,centerX*3/7,centerY*2/3,radius/8,0, Math.PI*2,false,'black','xor')",2000);
    var rlb=setTimeout("drawPie(context,centerX*11/7,centerY*2/3,radius/8,0, Math.PI*2,false,'black','xor')",2500);
</script>