HTML5的绘画支持（六）

浏览数：30 / 时间：2015年06月09日

绘画：lineTo示意

<html> 

<head>    

<title></title>

</head>

<body>

    <h2>lineTo示意</h2>  

   <canvas id="mc" width="480" height="380" style="border:1px solid black"></canvas>    

<script>

        function createStar(context, n, dx, dy, size) {    

         context.beginPath();       

      var dig = Math.PI / n * 4;   

          context.moveTo(dx, y + dy);    

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

              var x = Math.sin(i * dig);   

              var y = Math.cos(i * dig);       

          context.lineTo(x * size + dx, y * size + dy);       

      }     

        context.closePath();     

    }        

var canvas = document.getElementById("mc");      

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

      //画三角形      

   createStar(ctx, 3, 60, 60, 50);     

    ctx.fillStyle = "#f00";     

    ctx.fill();     

    //画五角星        

createStar(ctx, 5, 160, 60, 50);  

       ctx.fillStyle = "#00f";   

      ctx.fill();      

   //画七角星        

createStar(ctx, 7, 260, 60, 50);    

     ctx.fillStyle = "#00f";    

     ctx.fill();   

      //画九角星   

      createStar(ctx, 9, 360, 60, 50);     

    ctx.fillStyle = "#f0f";    

     ctx.fill();

    </script>

</body>

 </html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： style src com log html http si it for style src com log html http si it for

相关文章

随机文章

您可能还喜欢

您可能还喜欢