Canvas 初试 先画个萌萌的五角星

引言： 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 (*^▽^*)