zoukankan      html  css  js  c++  java
  • 一个给力的html5 画多边形的例子

    只需改变参数就能画出你想要的多边形,代码简单!不得不惊叹canvas的强大!

    代码奉上

    <!doctype html>
    <html>
    <head>
    <meta charset="gb2312">
    <title>画图</title>
    </head>
    
    <body>
      <canvas id = "myCanvas" width = '500' height = '500'>Canvas画线技巧</canvas>
    <script>
        var myCanvas = document.getElementById("myCanvas");
        var context =  myCanvas.getContext("2d");
            function drawPath(x, y, n, r)
            {
                    var i,ang;
                    ang = Math.PI*2/n //旋转的角度
                    context.save();//保存状态
                    context.fillStyle ='rgba(255,0,0,.3)';//填充红色,半透明
                    context.strokeStyle ='hsl(120,50%,50%)';//填充绿色
                    context.lineWidth = 1;//设置线宽
                    context.translate(x, y);//原点移到x,y处,即要画的多边形中心
                    context.moveTo(0, -r);//据中心r距离处画点
                    context.beginPath();
                    for(i = 0;i < n; i ++)
                    {
                            context.rotate(ang)//旋转
                            context.lineTo(0, -r);//据中心r距离处连线
                    }
                    context.closePath();
                    context.stroke();
                    context.fill();
                    context.restore();//返回原始状态
            }
            drawPath(100, 100, 3, 40)//在100,100处画一个半径为40的三边形
            drawPath(200, 100, 4, 40)//在200,100处画一个半径为40的四角形
            drawPath(300, 100, 5, 40)//在300,100处画一个半径为40的五边形
            drawPath(100, 200, 6, 40)//在100,200处画一个半径为40的六边形
            drawPath(200, 200, 7, 40)//在100,200处画一个半径为40的七边形
            drawPath(300, 200, 7, 40)//在300,200处画一个半径为40的八边形
    </script>
    </body>
    </html>
    耐得住寂寞,守得住繁华
  • 相关阅读:
    scrapy相关信息
    BeautifulSoup常见使用
    requests常用模块以及爬取github个人项目
    django rest framework 与前端跨域问题解决
    nginx配置正向代理与反向代理
    django+nginx+uwsgi+https
    linux基本命令
    python基本算法
    centos7配置ftp服务器
    nginx1.12配置
  • 原文地址:https://www.cnblogs.com/djdliu/p/3980865.html
Copyright © 2011-2022 走看看