canvas實現矩形繞着中心點旋轉

參考博客：

<! DOCTYPE  html >

< html  lang= "en" >

< head >

     < meta  charset= "UTF-8" >

     < meta  name= "viewport"  content= "width=device-width, initial-scale=1.0" >

     < meta  http-equiv= "X-UA-Compatible"  content= "ie=edge" >

     < title >Document </ title >

</ head >

< body >

     < canvas  id= "canvas"  style= " border:1px solid #000"  width= "600"  height= "600" >  </ canvas >

     < script >

         var  canvas =  document. getElementById( 'canvas');

         var  ctx =  canvas. getContext( '2d');

         var  angle =  10;

         setInterval( function(){

             ctx. clearRect( 0, 0, canvas. width, canvas. height); //清屏

             ctx. save();

             ctx. beginPath();

             ctx. translate( 300, 250); //圍繞矩形的中心點旋轉

             ctx. rotate( angle* Math.PI/ 180) //設置矩形旋轉

             // 繪制矩形

             ctx. fillStyle =  'red'

             ctx. fillRect(- 100,- 50, 200, 100) //fillrect(矩形寬度的一半，矩形高度的一半，矩形長度，矩形寬度)

             ctx. restore();

             angle++

        }, 20)

     < / script >

</ body >

</ html >