只需改变参数就能画出你想要的多边形，代码简单！不得不惊叹canvas的强大！

代码奉上

<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>画图</title>

</head>

<body>

  <canvas id = "myCanvas" width = '500' height = '500'>Canvas画线技巧</canvas>

<script>

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

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

        function drawPath(x, y, n, r)

        {

                var i,ang;

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

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

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

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

                context.lineWidth = 1;//设置线宽

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

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

                context.beginPath();

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

                {

                        context.rotate(ang)//旋转

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

                }

                context.closePath();

                context.stroke();

                context.fill();

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

        }

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

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

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

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

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

        drawPath(300, 200, 7, 40)//在300,200处画一个半径为40的八边形

</script>

</body>

</html>

一个给力的html5 画多边形的例子的更多相关文章

  1. iOS-CGContextRef画各种图形例子

    iOS-CGContextRef画各种图形例子 绘制效果图 绘制代码 - (void)drawRect:(CGRect)rect { //一个不透明类型的Quartz 2D绘画环境,相当于一个画布,你 ...

  2. 超给力的HTML5 3D动画欣赏及源码下载

    HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...

  3. 【转】C# 串口操作系列(1) -- 入门篇，一个标准的，简陋的串口例子。

    C# 串口操作系列(1) -- 入门篇,一个标准的,简陋的串口例子. 标签: c#objectnewlineexceptionbytestring 2010-05-17 01:10 117109人阅读 ...

  4. 使用Java、Matlab画多边形闭合折线图

    由于写论文要将“哈密顿回路问题(TSP)”的求解中间结果表示出来,查了一下使用程序画多边形图形.现在在总结一下,这个图是“由给定节点首尾相连的”闭合多边形. 1.使用matlab作闭合多边形图 没有找 ...

  5. 【编程漫谈】用JAVA画多边形

    一门语言只要带图形库就可以编程画图了,用JAVA画图有两种方式,一是在内存中画好然后生成图片,就可以看到画图的效果了.另一个就是在窗口界面上直接画,可以实时看到程序的运行效果.刚开始学编程的时候,我加 ...

  6. 最全vue的vue-amap使用高德地图插件画多边形范围

    一.在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下: import Vue from 'vue' import VueAMap from 'vue-amap' ...

  7. 查看某一个点是否在某个多边形内 使用ST_Contains函数

    查看某一个点是否在某个多边形内  使用ST_Contains函数 --LINESTRING ( 121.312350 30.971457 , 121.156783 31.092221 , 121.35 ...

  8. 一个layer可以跟着画完的线移动ios程序 好玩啊。

    用法:采用的是关键帧实现的. 实验目的:让上层的layer子层能够跟着在另一个子层上花的线进行移动 .即当线画完之后,图形开始移动,并且能够停在最后的那个位置 效果图: 采用是直接在layer图层上进 ...

  9. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. python单/双下划线使用

    在Python编程中经常会遇到函数(function),方法(method)及属性(attribute)以下划线'_'作为前缀,这里做个总结. 主要存在四种情形: 1. object # public ...

  2. 基于jQuery实现的水平和垂直居中的div窗口

    在建立网页布局的时候,我们经常会面临一个问题,就是让一个div实现水平和垂直居中,虽然好几种方式实现,但是今天介绍时我最喜欢的方法,通过css和jQuery实现.   1.通过css实现水平居中: 复 ...

  3. datagrid指定行合并导出

    导出代码: public void GridViewToExcel(GridView ctrl, string FileType, string FileName) { HttpContext.Cur ...

  4. 使用meaven打包过程中遇到的一些问题

    开始使用如下代码进行打包 <build> <!-- mvn assembly:assembly -Dmaven.test.skip=true --> <plugins&g ...

  5. malloc和free的区别

    1,malloc与free是C++/C语言的标准库函数,new/delete是C++的运算符.它们都可用于申请动态内存和释放内存. 2,对于非内部数据类型的对象而言,光用maloc/free无法满足动 ...

  6. BZOJ 3672: [Noi2014]购票( 树链剖分 + 线段树 + 凸包 )

    s弄成前缀和(到根), dp(i) = min(dp(j) + (s(i)-s(j))*p(i)+q(i)). 链的情况大家都会做...就是用栈维护个下凸包, 插入时暴力弹栈, 查询时就在凸包上二分/ ...

  7. BZOJ 1416: [NOI2006]神奇的口袋( 高精度 )

    把x1~xn当成是1~n, 答案是不会变的. 然后直接模拟就行了...... P.S 双倍经验... BZOJ1416 && BZOJ1498 -------------------- ...

  8. vijos 1067 Warcraft III 守望者的烦恼 矩阵

    题目链接 我们可以很容易的推出dp的式子, dp[i] = sigma(j : 1 to k) dp[i-j]. 但是n太大了, 没有办法直接算, 所以我们构造一个矩阵, 然后快速幂就好了. 就像这样 ...

  9. 程序员眼里IE浏览器是什么样的

    主流浏览器之争从上个世纪开就开始,已经持续了很长的时间.就在几年前,IE还是最主流的web浏览器.但现在形势完全不同了,人们都在笑话IE,纷纷转向其它浏览器.今天,我向大家分享一下针对IE的搞笑图片, ...

  10. Trafic

    Dialogue 1  You took the wrong bus 你做错车了 A:Hi, I want to see the Terra Cotta Warriors in Xi'an. Coul ...