引言： css 動畫和 Canvas 讓我們可以做很多有趣的東西，前面用過css 動畫做過簡單的掛圖和一些 翻頁廣告，這次學習Canvas 可以用來畫圖啦。很簡單的入門之作，直接上代碼，平時忘記了還可以看一看提醒自己。不得不說剛剛入門，最近我的學習碰到的最大困難就是，學的東西在慢慢忘記。ε=(´ο｀*)))唉

<div class="app">
    <canvas id="canvas" width="800px" height="800px" style="border: 1px solid black"></canvas>
 
</div>
<script>
    window.onload=function () {
        var canvas=document.getElementById("canvas");

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


        darw(context, 100, 150, 400,400 ,30);

        function darw(ctx, r, R, x, y ,deg) {// deg 圖片旋轉角度

            context.beginPath();

            for (var i=0;i<5;i++){
 

                context.lineTo(Math.cos((18+i*72-deg)/180*Math.PI)*R+x,
                    -Math.sin((18+i*72-deg)/180*Math.PI)*R+y) ;

                context.lineTo(Math.cos((54+i*72-deg)/180*Math.PI)*r+x,
                    -Math.sin((54+i*72-deg)/180*Math.PI)*r+y);
            }
        }

            context.closePath();
 
            context.fillStyle=‘yellow‘;
            context.fill();
            context.lineWidth=10;
           /* context.lineJoin=‘round‘*/
             context.lineCap=‘square‘ // butt round square
           //context.miterLimit=10;
          //  context.lineJoin=‘miter‘
             context.stroke();
    }

這些註釋的都是Canvas 初試常用的屬性，感覺還是要記住思路怎麽用。

ps : 畫五角星比較難的還是這個數值計算，說起來Canvas剛上手，讓我的感覺就是，這個位置的計算真的有些困難。

可以點擊這裏查看demo (*^▽^*)

Canvas 初試 先畫個萌萌的五角星