<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="myCanvas" width='' height=''>测试</canvas>

    <script>

    var myCanvas = document.getElementById("myCanvas");

    var context = myCanvas.getContext("2d");

    function drawPath(x, y, n, r) {

        var i, ang;

        ang = Math.PI *  / n //旋转的角度

        context.save(); //保存状态

        context.fillStyle = 'rgba(0,0,0,0)'; //填充红色，半透明

        context.strokeStyle = 'hsl(120,50%,50%)'; //填充绿色

        context.lineWidth = ; //设置线宽

        context.translate(x, y); //原点移到x,y处，即要画的多边形中心

        context.moveTo(, -r); //据中心r距离处画点

        context.beginPath();

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

            context.rotate(ang) //旋转

            context.lineTo(, -r); //据中心r距离处连线

        }

        context.closePath();

        context.stroke();

        context.fill();

        context.restore(); //返回原始状态

    }

    drawPath(, , , ) //在100,100处画一个半径为40的五边形

    drawPath(, , , ) //在200,100处画一个半径为40的三角形

    drawPath(, , , ) //在300,100处画一个半径为40的六边形

    drawPath(, , , ) //在100,200处画一个半径为40的十五边形

    drawPath(, , , ) //在100,200处画一个半径为40的四边形

    </script>

</body>

</html>

canvas 画六边形边框的更多相关文章

  1. canvas 画六边形

    <section class="m1-c"> <div class="m1-t clearfix"> <ul> <li ...

  2. HTML5之Canvas画正方形

    HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

  3. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  4. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  5. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  6. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  7. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  9. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

随机推荐

  1. UVA 10003 切木棍(普通DP)

    切木棍 紫书P278 算是简单的dp了吧,当然,这是看完别人题解后的想法,呵呵,我仍然是想了半小时,没思路,啥时候能自个整个dp啊!!→_→ dp的时候,输入数组必须从1开始,一定要注意状态的设计,和 ...

  2. NeHe OpenGL教程 第四十五课：顶点缓存

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  3. gerrit error: unpack failed: error Permission denied

    gerrit服务器迁移后,clone和pull代码到本地,都没问题. 但是,push时,报错: 查看了下git版本库存储目录,发现git下版本库镜像文件owner都是root.因为之前安装的gerri ...

  4. 在silverlight中通过WCF连接ORACLE DB数据库(转)

    转自 http://hi.baidu.com/qianlihanse/item/458aa7c8d93d4e0cac092ff4 这不是我的原创,我也是上网学习的~ How to get data f ...

  5. 【SSM 3】Mybatis应用，和Hibernate的区别

    PS:每次写概念性的总结,都是各种复制,各种粘,然后各种理解各种猜.但是这一步的总结,决定了我能够再这条路上走的远近和是否开心.是否创造!so,开启Ctrl A+Ctrl C的模式吧. 接触到这个概念 ...

  6. PHP 程序员的技术成长规划

    [导读] 按照了解的很多PHP LNMP程序员的发展轨迹,结合个人经验体会,抽象出很多程序员对未来的迷漫,特别对技术学习的盲目和慌乱,简单梳理了这个每个阶段PHP程序员的技术要求,来帮助很多PHP程序 ...

  7. dubbo properties

    DUBBO配置项的优先级: java -D优先于 Spring配置,Spring配置优先于 properties文件的配置,这也符合一般项目的规则. 覆盖策略: JVM启动-D参数优先,这样可以使用户 ...

  8. VC++ 中简单操作MP3音乐的方法,小结

    #include <windows.h> #include <stdio.h> #include <mmsystem.h> #include <shellap ...

  9. JQuery 操作按钮遮罩（删除）

    HTML代码: <input type="button" class="delete_btn" value="删 除" /> & ...

  10. bs4的学习

    soup = BeautifulSoup(html,'html.parser') #'html.parser'是html解析器必须有soup.find_all("a")  #等价于 ...