效果图：

<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. kafka 0.10.2 cetos6.5 集群部署

    安装 zookeeper http://www.cnblogs.com/xiaojf/p/6572351.html安装 scala http://www.cnblogs.com/xiaojf/p/65 ...

  2. IPad分屏，当电脑第二显示屏

    最在在网上看到使用IPad可以做为电脑的第二个显示屏,对于我这样一个程序猿来说,这真是我的福音呀!因此在网上搜了许多关于Ipad投屏的信息,下面简单说明一下,包括怎么使用! 1.根据在网上搜索的结果, ...

  3. mysql之 mysqldump 备份恢复详解

    mysqldump是MySQL用于转存储数据库的客户端程序.转储包含创建表和/或装载表的SQL语句 ,用来实现轻量级的快速迁移或恢复数据库,是mysql数据库实现逻辑备份的一种方式. mysqldum ...

  4. java-web中生成文档（一）

    基于Java的解决方案也是很多的,包括使用Jacob.Apache POI.Java2Word.iText等各种方式,其实在从Office 2003开始,就可以将Office文档转换成XML文件,这样 ...

  5. 弹出框插件layer使用

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...

  6. javascript基础-正则表达式

    概述 正则表达式被用来检索.替换那些符合某个模式的文本 标准正则表达式语法 javascript对正则表达式的支持 替代写法 逆向环视 //需求:替换mpre.cnsuning.com为${pre}, ...

  7. 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用

    @charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...

  8. c++ const char *[] or char [][]

    ]={"hello","world"}; ]={"hello"};char (*ch3)[6]= ch1; std::cout<< ...

  9. oracle日期时间函数 总结

    表中存在伪列:sysdate,systimestamp 伪列存在但是不显示 select sysdate from dual; select systimestamp from dual; 日期计算公 ...

  10. [0] (VDP)垂直开发模式

    垂直管理 网格化管理 属地管理 横向管理 面向接口编程 面向对象编程(OOP) 设计模式(GOF.MVC.SOA) 依赖注入(DI/IoC) 面向方面编程(AOP) 领域驱动开发(DDD) 测试驱动开 ...