效果图：

<body>

<canvas id="square" width="500"></canvas>

<canvas id="circle"></canvas>

<script type="text/javascript">

function polygon(c,n,x,y,r,angle,counterclockwise){

	angle = angle || 0;

	counterclockwise = counterclockwise ||false;

	c.moveTo(x+r*Math.sin(angle),		//从第一个顶点开始一条新的子路径

				y-r*Math.cos(angle));	//使用三角法计算位置

	var delta = 2*Math.PI/n;			//两个顶点之间的夹角

	for(var i=1 ; i < n ; i++){			//循环剩余的每个顶点

		angle += counterclockwise ? -delta:delta;	//调整角度

		c.lineTo(x+r*Math.sin(angle),	//以下个顶点为端点添加线段

			y-r*Math.cos(angle));

	}

	c.closePath(); 		//将最后一个顶点和起点连接起来

}

var convas = document.getElementById('square');

var c=convas.getContext("2d");

//开始一个新的路径并添加一条多边形子路径

c.beginPath();

polygon(c,3,50,70,50);		//三角形

polygon(c,4,150,60,50,Math.PI/4);		//正方形角形

polygon(c,5,255,55,50);		//五角形

polygon(c,6,365,53,50,Math.PI/6);		//六角形

polygon(c,4,365,53,20,Math.PI/4,true);		//六边形中的小正方形

//设置属性来控制图形外观

c.fillStyle = "#ccc" ; 		//内部使用浅灰色

c.strokeStyle = "#008"; 	//深蓝色外边框

c.lineWidth =2;		 		//2个像素宽

//调用如下函数绘制所有这些多边形（每个分别定义在自己的子路径中）

c.fill();

c.stroke();

</script>

</body>

　　

JavaScript+canvas 绘制多边形的更多相关文章

  1. canvas绘制多边形

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 浅谈使用canvas绘制多边形

    本文主要使用坐标轴的使用来绘制多边形,点位则都是在y轴上寻找,这种方法能够更好的理解图形与修改. //id为html里canvas标签的属性id: //x,y为坐标轴的起始位置,因为canvas默认坐 ...

  3. javascript -- canvas绘制曲线

    绘制曲线有几种思路: 1.通过quadraticCurveTo(controlX, controlY, endX, endY)方法来绘制二次曲线 2.通过bezierCurveTo(controlX1 ...

  4. （三）canvas绘制样式

    beginPath() 对画线点的一个开始限制 moveTo() 画线的起点,只在开头使用 参数两个x轴,y轴 lineTo() 后续连线 两个参数x轴,y轴 stroke() 连线无填充 fill( ...

  5. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  6. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  7. [WebGL入门]十四，绘制多边形

    注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...

  8. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  9. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

随机推荐

  1. js—浅谈方法和思路的重要性（首篇求大佬支持）

    js-浅谈方法和思路的重要性 学了这么久的js,我从老师的,同学的代码中发现,老师写的代码比我们的要清楚的很多,基本上没有太多累赘啊,能少的没有少啊等等..... 废话不多说,下面我们来看看这个我的一 ...

  2. css隐藏文字的小技巧

    前段时间,在做项目的时候,遇到一个问题.背景图片上有一个“立即注册”的按钮,需要点击.但是问题是:现在的图片是背景图片,如果图片是在html页面内的话,我们可以使用锚点来对图片添加链接.这个时候,我们 ...

  3. OWIN 自宿主模式WebApi项目，WebApi层作为单独类库供OWIN调用

    OWIN是Open Web Server Interface for .NET的首字母缩写,他的定义如下: OWIN在.NET Web Servers与Web Application之间定义了一套标准 ...

  4. 模板C++ 03图论算法 2最短路之全源最短路(Floyd)

    3.2最短路之全源最短路(Floyd) 这个算法用于求所有点对的最短距离.比调用n次SPFA的优点在于代码简单,时间复杂度为O(n^3).[无法计算含有负环的图] 依次扫描每一点(k),并以该点作为中 ...

  5. mysql之 innobackupex备份+binlog日志的完全恢复（命令行执行模式）

    前言:MySQL的完全恢复,我们可以借助于完整的 备份+binlog 来将数据库恢复到故障点.备份可以是热备与逻辑备份(mysqldump),只要备份与binlog是完整的,都可以实现完全恢复. 1. ...

  6. 链表插入和删除，判断链表是否为空，求链表长度算法的，链表排序算法演示——C语言描述

    关于数据结构等的学习,以及学习算法的感想感悟,听了郝斌老师的数据结构课程,其中他也提到了学习数据结构的或者算法的一些个人见解,我觉的很好,对我的帮助也是很大,算法本就是令人头疼的问题,因为自己并没有学 ...

  7. 用java实现简单快速的webservice客户端/数据采集器（支持soap1.1和soap1.2标准，支持utf-8编码）

    前言: 用了cxf,axis等各种wbeservice实现库,简单试用了一下动态调用的方式,很不满意,完全无法满足业务的需要,所以自己实现了一个webservice采集客户端,方便动态调用外部webs ...

  8. shiro开发，shiro的环境配置（基于spring+springMVC+redis）

    特别感谢lhacker分享的文章,对我帮助很大 http://www.aiuxian.com/article/p-1913280.html 基本的知识就不在这里讲了,在实战中体会shiro的整体设计理 ...

  9. 积累一些不太常用的c语言知识（不断更新）

    这里积累一些日常编程用得比较少的知识,不断添加. scanf("%c%*c%c",&a,&b); 其中的*表示跳过,本来输入三个数字,结果中间那个读入后被抛弃,a和 ...

  10. MySQL，Oracle，PostgreSQL 数据库web维护客户端管理工具

    TreeDMS数据库管理系统使用JAVA开发,采用稳定通用的springMVC +JDBC架构,实现基于WEB方式对 MySQL,Oracle,PostgreSQL 等数据库进行维护管理操作. 功能包 ...