码迷,mamicode.com
首页 > Web开发 > 详细

HTML5的绘画支持(六)

时间:2014-12-16 00:50:02      阅读:292      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   os   sp   for   strong   

绘画: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>

bubuko.com,布布扣

HTML5的绘画支持(六)

标签:style   blog   http   io   ar   os   sp   for   strong   

原文地址:http://www.cnblogs.com/yhq361/p/4166191.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!