以HTML5畫CropCircle--clip() & CCS3 Rotate特效

這是今年五月份第一個出現的麥田圈,正確來說應該叫"油菜田圈",其實上個月英國已經出現幾個麥田圈了,只不過Jimmy's papa覺得那幾個圈圈怪怪的找不到"對稱性",所以就沒拿來當作HTML5練習,剛好這個油菜田圈找得到"對稱性"蠻適合以程式繪製,也順便測測CCS3 Rotate特效

Your browser does not support the canvas element.

<style type="text/css">
#CCDiv {
  width: 600px;
  height: 430px;
  float: left;
  transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
}
</style>
<div id="CCDiv">
<canvas id="myCropCircle0511" width="600" height="430" style="border:0px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</div>
<script type="text/javascript">
<!--



function drawTriCircles(context,centerX,centerY,radius,d)
{
    context.save();


    //-----------
    context.fillStyle="black";
    context.globalCompositeOperation = 'xor';
    context.beginPath();
    context.arc(300,150,150,0,Math.PI*2,true);
    context.fill();
    context.globalCompositeOperation = 'xor';
    context.beginPath();
    context.arc(300-75,150+129.9,150,0,Math.PI*2,true);
    context.fill();
    context.globalCompositeOperation = 'xor';
    context.beginPath();
    context.arc(300+75,150+129.9,150,0,Math.PI*2,true);
    context.fill();

    //-----------
    context.beginPath();
    context.arc(300,150,75,0,Math.PI*2,true);

    context.lineWidth=5;
    context.strokeStyle="white"; 
    context.stroke();

    context.beginPath();
    context.arc(300-75,150+129.9,75,0,Math.PI*2,true);

    context.lineWidth=5;
    context.strokeStyle="white"; 
    context.stroke();

    context.beginPath();
    context.arc(300+75,150+129.9,75,0,Math.PI*2,true);

    context.lineWidth=5;
    context.strokeStyle="white"; 
    context.stroke();
    //-----------
    context.restore();
}

function drawAnotherLayerTriCircles(context,centerX,centerY,radius,d)
{
    context.save();

    // Create a circular clipping path  
    context.fillStyle="white";

    context.beginPath();
    context.arc(300,150,150,Math.PI/3*2,Math.PI/3,true);

    context.arc(300-75,150+129.9,150,0,Math.PI/3*5,true);

    context.arc(300+75,150+129.9,150,Math.PI/3*4,Math.PI/3*3,true);

    context.closePath();
    context.fill();
    context.clip();

    context.fillStyle="black";
    context.beginPath();
    context.arc(150,150,150,0,Math.PI*2,true);
    context.fill();
    context.beginPath();
    context.arc(450,150,150,0,Math.PI*2,true);
    context.fill();
    context.beginPath();
    context.arc(300,410,150,0,Math.PI*2,true);
    context.fill();
    context.restore();
}


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

    var draw1=setTimeout("drawTriCircles(context,150,150,150,d)",1000);
    var draw2=setTimeout("drawAnotherLayerTriCircles(context,150,150,150,d)",2000);


    var CCDiv = document.getElementById('CCDiv');
    var d = 0;
    setInterval(function () {
      d = (d + 0.1) ;
      CCDiv.style.transform = 'rotate(' + d + 0 + 'deg)';
      CCDiv.style.OTransform = 'rotate(' + d + 0 + 'deg)';
      CCDiv.style.MozTransform = 'rotate(' + d + 0 + 'deg)';
      CCDiv.style.WebkitTransform = 'rotate(' + d + 0 + 'deg)';
}, 30);
-->
</script>