zoukankan      html  css  js  c++  java
  • HTML5的绘画支持(六)

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

  • 相关阅读:
    Laravel笔记
    Mysql函数大全
    nginx中文文档
    解析富文本框
    VSCode的C++环境配置,多cpp在同一文件夹(json方式)
    UltraISO光盘刻录
    plog日志库(c++)
    .NET Core安装
    Halcon深度学习——奇异值检测
    C++命名规范
  • 原文地址:https://www.cnblogs.com/yhq361/p/4166191.html
Copyright © 2011-2022 走看看