<!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. [solr] - spell check

    solr提供了一个spell check,又叫suggestions,可以用于查询输入的自动完成功能auto-complete. 参考文献: https://cwiki.apache.org/conf ...

  2. 在AD转换中的过采样和噪声形成

    1. 直接量化的过采样AD转换 此类系统的模型可以用下图表示. 图中xa(t)是输入信号,e(t)是量化引入的噪声,xd[n]是最终得到的数字信号,包含分量xda和xde. 对于M倍过采样,信号与量化 ...

  3. python学习-day20、装饰器【图片缺失可看】印象笔记博客备份

    前言: 装饰器用于装饰某些函数或者方法,或者类.可以在函数执行之前或者执行之后,执行一些自定义的操作. 1.定义:装饰器就是一个函数,为新定义的函数.把原函数嵌套到新函数里面.以后就可以在执行新函数的 ...

  4. 利用硬链接和truncate降低drop table对线上环境的影响

    众所周知drop table会严重的消耗服务器IO性能,如果被drop的table容量较大,甚至会影响到线上的正常. 首先,我们看一下为什么drop容量大的table会影响线上服务 直接执行drop ...

  5. 黄聪：wordpress向一个页面POST数据，出现404页面访问不了

    出现这个情况,说明POST的数据中存在一些关键词,触发调用了page以外的模版.比如POST数据中有 name , author 等参数. 解决办法,就是把这些参数改一下名称.

  6. Python 列表

    python 列表 列表的特点 1.列表是一种可变的数据类型,这点是跟元组有区别的 2.列表中的值是有序的,并且可存放重复的值,这点跟set有区别的 3.python中的列表类似于其它语言中的数组 4 ...

  7. django Q和F查询

    Q查询——对对象的复杂查询F查询——专门取对象中某列值的操作 Q查询1.Q对象(django.db.models.Q)可以对关键字参数进行封装,从而更好地应用多个查询,例如: from django. ...

  8. Linux卷配置管理

    [root@linux ~]# df -hFilesystem Size Used Avail Use% Mounted on/dev/sda3 19G 11G 6.5G 63% /tmpfs 995 ...

  9. Linux Install VirtualBox

    添加源: cd /etc/yum.repos.dwget http://download.virtualbox.org/virtualbox/rpm/rhel/virtualbox.repo 下面3个 ...

  10. C#中定义数组

    C#定义数组 一.一维:int[] numbers = new int[]{1,2,3,4,5,6}; //不定长 int[] numbers = new int[3]{1,2,3};//定长   二 ...