<!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. Action、Action<T>、Func<T> 匿名函数的写法

    void ht_HLB_Set(Dictionary<int, int> dic) { //匿名函数 Action<int> fun = (int jhShare_Iid) = ...

  2. 7、java实现的两种单例模式

    /* 两种单例模式的演示 */ //饿汉式 class Signal { private Signal(){} private Signal s = new Signal(); public stat ...

  3. input 只读不能修改

    方法1: onfocus=this.blur() <input type="text" name="input1" value="中国" ...

  4. 四、Spring——Spring MVC

    Spring MVC 1.Spring MVC概述 Spring MVC框架围绕DispatcherServlet这个核心展开,DispatcherServlet负责截获请求并将其分配给响应的处理器处 ...

  5. bzoj2518: [Shoi2010]滚动的正四面体

    Description 正四面体总共有4个面,每个面都是一个正三角形.现在把它的一个面标记上字母A,如图 3中所示,A标记在底面上: 于是,这个正四面体的滚动过程就可以用一个只包含“L”“R”“B”的 ...

  6. IOCP之客户端及消息传递

    上篇说到IOCP的精简实现,这篇来讲IOCP客户端和消息传递 在ConnectEx代码之前,CreateIoCompletionPort的第三个参数,把socket句柄+0x01000000作为传递 ...

  7. Apache Httpd + Subversion 搭建HTTP访问的SVN服务器

    最近要搭建一个SVN服务器.简单安装之后,本地访问没有问题,但作为服务器肯定是需要HTTP访问.搜索之后,以下是我按照网上的资料搭建的过程,以备后用和参考.(所有软件安装步骤略,没有特殊的,如果没有特 ...

  8. NGUI之UILabel

    重要属性说明 overflow: Shrink Content: 意味着内容会自动被缩小以便适应区域.它在你使用动态字体的同时使用Keep      Crisp设置时有效,让字体变小,而不是缩放内容. ...

  9. [vB.NET]为控件添加鼠标悬浮时的提示气泡

    实例代码: Dim k As ToolTip k = New ToolTip() k.AutoPopDelay = '显示出气泡后的延时时间(毫秒) k.InitialDelay = '出现前的延时( ...

  10. Spark On Yarn中spark.yarn.jar属性的使用

    今天在测试spark-sql运行在yarn上的过程中,无意间从日志中发现了一个问题: spark-sql --master yarn // :: INFO Client: Requesting a n ...