<!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. SQL：查找被锁的表，以及锁表的SQL语句（重点推荐）

    --死锁检测 use master Select * --找到SPID exec sp_lock --根据SPID找到OBJID ) --根据OBJID找到表名 1.DatabaseName 同于你要 ...

  2. 【Java数据格式化】使用DecimalFormat 对Float和double进行格式化

    格式化包括如下内容: 基本用法 金钱格式: 科学计数法: 百分比计数法: 嵌入文本: package com.sssppp.NumberFormat; import java.text.Decimal ...

  3. BootstrapValidator验证表单用法

    引入文件 <link rel="stylesheet" href="css/bootstrap.css"/> <link rel=" ...

  4. c#调用C++DLL参数对应

    //c++:Byte(unsigned   char)     ----    c#:System.Byte         //c++:SHORT(short)              ----  ...

  5. 建工财务搬家NC变更|rman各种测试|

    1,使用全备份之后的还原不需要建立表空间. 2,归档日志备份之后,使用delete all input,在backup database plus achivelog之后,会在完成备份之后自动删除归档 ...

  6. java内存溢出分析（一）

    在项目中发现内存占用过高,且一直不会释放,top命令如下图显示 可以看到pid为17453的java进程占用27.1%内存,且长时间没有释放. 1.使用命令生成heap日志以供分析 sudo jmap ...

  7. 112、两个Activity切换黑屏问题

    <activity android:name=".main.select.ActDoyenActivity" android:screenOrientation=" ...

  8. 炉石复盘 宇宙法vs复活牧 [20161130]

    选宇宙法完成使用50个法师职业牌的任务,遇到一个复活牧泰兰德. 前中期下怪,解场.虽然宇宙法偏娱乐,但牧师节奏也比较慢,因此血线一度降到10血以下,但仍然不惧怕牧师斩杀. 9费牧师拍下伊瑟拉,解不掉, ...

  9. MVC 项目中为什么会有两个web.config

    我们对MVC 并不陌生, 在创建MVC项目时,总会发现,在工程目录 中有两个 web.config 文件,一个是在工程的根目录下,一是在 views 下,两个web.config 中的内容也不尽相同, ...

  10. js方法之间的调用之——传参方法

    在最近项目需求中发现,完成一些功能的时候总是要调很多结构类似的方法,写起来很繁琐,所以就想写一个“万能”方法,是的代码更简洁.即:把一个方法作为参数传给这个“万能”方法,让它去执行你给定的方法,就类似 ...