<!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. 关于jQuery中的submit()函数

    关于jQuery中的submit()函数(绑定event handler or 触发event?) 今天在敲代码的时候无意间碰到了一个比较绕的问题(一个小师弟问的问题),思前想后都不明白,上午百度.谷 ...

  2. 随机数生成器console

    #include <stdio.h> #include <stdlib.h> #include <time.h> int main() { ]; ]; int i; ...

  3. Bellman算法

    Bellman算法 当图有负圈的时候可以用这个判断最短路! [时间复杂度]O(\(nm\)) &代码: #include <bits/stdc++.h> using namespa ...

  4. angular.js input

    <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8& ...

  5. oracle的char和varchar类型

    源地址:https://zhidao.baidu.com/question/140310197.html varchar与char的区别就在于是否可变长度.char(5)就是定义一个5个字符长度的字符 ...

  6. 【转载】Securing Kibana + Elasticsearch

    from: http://tom.meinlschmidt.org/2014/05/19/securing-kibana-elasticsearch/ After some successful se ...

  7. Python基础篇【第2篇】: Python自定义函数

    Python函数 1. 函数定义 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print ...

  8. 十大关系数据库SQL注入工具一览

    摘要:众所周知,SQL注入攻击是最为常见的Web应用程序攻击技术.同时SQL注入攻击所带来的安全破坏也是不可弥补的.以下罗列的10款SQL工具可帮助管理员及时检测存在的漏洞. BSQL Hacker ...

  9. 9. Linux远程登录

    1. 检查网络是否通畅 C:\Users\cfm>ping 192.168.232.131 正在 Ping 192.168.232.131 具有 32 字节的数据:来自 192.168.232. ...

  10. iOS开发中的4种数据持久化方式【一、属性列表与归档解档】

    iOS中的永久存储,也就是在关机重新启动设备,或者关闭应用时,不会丢失数据.在实际开发应用时,往往需要持久存储数据的,这样用户才能在对应用进行操作后,再次启动能看到自己更改的结果与痕迹.ios开发中, ...