首先畫三個圓

circle

function drawLogo(){   //畫個logo
            ctx.translate(100,60);   //將畫布中心轉移到(100,60)處
            
            ctx.beginPath();
            ctx.fillStyle="#ff0000";
            ctx.arc(-25,-20,25,0,2*Math.PI,false);
            ctx.fill();
            ctx.beginPath();
            ctx.fillStyle="#00ff00";
            ctx.arc(25,-20,25,0,2*Math.PI,false);
            ctx.fill();
            ctx.beginPath();
            ctx.fillStyle="#0000ff";
            ctx.arc(0,25,25,0,2*Math.PI,false);
            ctx.fill();


        }
 

rotate

結果就變成一坨。。。不是，變成一個無敵風火輪了。

很顯然，轉動的話，可以讓它繞中心旋轉，這裡可以用簡單的rotate，當然也可以用矩陣轉換

function transform(){
            getCtx();  //獲取context
            drawLogo();

             //開始轉動
            var sina = Math.sin(30*Math.PI/180);
            var cosa = Math.cos(30*Math.PI/180);
            ctx.transform(cosa,sina,-sina,cosa,0,0);
            ctx.fill();
            // ctx.rotate(30*Math.PI/180);
             ctx.translate(-100,-60);   //將中心還原回去，不然會奇怪

        }
 

<!-- 我的畫布 -->
        <script type="text/javascript">
            setInterval(transform,1000);
            // setTimeout(transform,1000);
        </script>