以HTML5畫CropCircle--save() & restore() & clip()

Your browser does not support the canvas element. 這個麥田圈不是很容易"反向工程",不過也剛好可以讓Jimmy's papa可以練習下列幾個重要的canvas函數,但是不知道製作麥田圈的"地外文明"人士是如何辦到的,Jimmy's papa試過很多方式微調參數,想讓中間剪裁出來的圓圈裡頭的黑白條紋,可以很精準的對應到兩旁同心圓的白黑條紋,可惜都會有些許的空隙出現,Jimmy's papa在想是否因為採用2d的作圖方式才會產生如此落差呢?

context.save()       //目前設定狀態存入堆疊
context.restore()    //回存設定狀態取自堆疊
context.translate()  //位移矩陣
context.rotate()     //旋轉矩陣
context.clip()       //剪裁遮罩

<canvas id="myCropCircle0426" width="600" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

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

function drawTwinCircles(context,centerX,centerY,radius,d)
{
    context.save();
    context.translate(450,-150);
    context.rotate(Math.PI*2/4);
    //-----------
    context.fillStyle="black";
    context.beginPath();        
    context.arc(centerX+radius/6+d,centerY,radius/6,0, 2*Math.PI,false);
    context.fill();
    context.beginPath();        
    context.arc(centerX+radius*2-radius/6-d,centerY,radius/6,0, 2*Math.PI,false);
    context.fill();
    //-----------
    context.beginPath();
    context.arc(300,150,125-15,0,Math.PI*2,true);
    context.fill();
    context.lineWidth=10;
    context.strokeStyle="white"; 
    context.stroke();    


    context.restore();
}


function drawTwinConcentricCircles(context,centerX,centerY,radius,d)
{
    context.save();
    for (var i=6;i>0;i--)
    {
        if((i%2)==0)
            context.fillStyle="black";
        else
            context.fillStyle="white";
        context.beginPath();        
        context.arc(centerX+radius/6+d,centerY,radius/6*i,0, 2*Math.PI,false);
        context.fill();
        context.beginPath();        
        context.arc(centerX+radius*2-radius/6-d,centerY,radius/6*i,0, 2*Math.PI,false);
        context.fill();

    }


    context.restore();
}


function drawFloatTwinConcentricCircles(context,centerX,centerY,radius,d)
{
    context.save();
    context.translate(450,-150);
    context.rotate(Math.PI*2/4);

    // Create a circular clipping path        
    context.beginPath();
    context.arc(300,150,125-15,0,Math.PI*2,true);
    context.clip();

    context.beginPath();
    context.arc(300,150,125-15,0,Math.PI*2,true);
    context.fill();

    for (var i=6;i>0;i--)
    {
        if((i%2)==0)
            context.fillStyle="white";
        else
            context.fillStyle="black";
        context.beginPath();        
        context.arc(centerX+radius/6+d,centerY,radius/6*i,0, 2*Math.PI,false);
        context.fill();
        context.beginPath();        
        context.arc(centerX+radius*2-radius/6-d,centerY,radius/6*i,0, 2*Math.PI,false);
        context.fill();
    
    }


    context.restore();
}



    var canvas=document.getElementById("myCropCircle0426");
    var context=canvas.getContext("2d");

    var d = 3;

    var draw1=setTimeout("drawTwinCircles(context,150,150,150,d)",1000);
    var draw2=setTimeout("drawTwinConcentricCircles(context,150,150,150,d)",2000);
    var draw3=setTimeout("drawFloatTwinConcentricCircles(context,150,150,150,d)",3000);


-->
</script>