效果图：

<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. mysql之 binlog维护详细解析（开启、binlog相关参数作用、mysqlbinlog解读、binlog删除）

    binary log 作用:主要实现三个重要的功能:用于复制,用于恢复,用于审计.binary log 相关参数:log_bin设置此参数表示启用binlog功能,并指定路径名称log_bin_ind ...

  2. Nagios配置安装详解

    nagios.html :first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0,0,.1);borde ...

  3. msseces.exe频繁出错的原因和解决方法？

    关机时会报错,什么内存为只读.. 以下是官方给的解决方案,相信对大部分用户都起作用,在这分享给大家. 对于当前遇到的问题,有可能是由于程序冲突导致.因此建议进入干净启动状态再确认问题是否发生: 1．如 ...

  4. 将数据的初始化放到docker中的整个工作过程(问题记录)

    将数据的初始化放到docker中的整个工作过程 由于是打算作为个人博客,所以对于install这个步骤,我从一开始就打算删掉的,前面一个多星期一直在修bug,到前天才开始做这个事情. 过程中也是碰到了 ...

  5. java面试题之int和Integer的区别

    int和Integer的区别 1.Integer是int的包装类,int则是java的一种基本数据类型 2.Integer变量必须实例化后才能使用,而int变量不需要 3.Integer实际是对象的引 ...

  6. [转]tomcat部署（1）

      阅读目录 1 目录结构 2 部署 3 发布 4 测试 本篇参考Tomcat官方文档:<First Webapp>翻译,并结合自己的开发经验介绍关于tomcat部署以及发布的相关内容. ...

  7. Centos 环境一键部署脚本（shell脚本）

    谨以此文纪念吊炸天的Centos环境一键部署方案的新鲜出炉 辛苦大半年,产品准备上线了,BOSS亲自体验安装部署,看着超过200+页的安装文档直接崩溃了(需要部署23个基础服务),经历了超过3个小时的 ...

  8. iOS工程师常用的命令行命令总结

    感觉有点标题党了. 作为一个iOS工程师,没有做过服务端,主要用的是mac电脑,此篇博文是记录我在工作,学习的过程中用的命令行命令的记录和归纳总结 一. mac命令行 1. cd /Users/xxx ...

  9. hibernate操作步骤（代码部分）

    1.加载hibernate的核心配置文件 2.创建SessionFactory对象 3.使用SessionFactory创建Session对象 4.开启事务(手动开启) 5.写具体逻辑crud,增删改 ...

  10. debian将默认中文改成英文

    $ sudo export LANG=en_US.UTF-8 $ sudo dpkg-reconfigure locales