效果图：

<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. Plotting trees from Random Forest models with ggraph

    Today, I want to show how I use Thomas Lin Pederson's awesome ggraph package to plot decision trees ...

  2. js文件下载及命名（兼容多浏览器）

    函数功能:实现主流浏览器的文件下载功能: 兼容性: >=IE10,Edge,chrome,firefox; 与后台的请求方式:GET请求,  url携带参数  url?id=123(隐藏文件真实 ...

  3. Html5语义化标签详解及其兼容性处理

    <header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...

  4. 关于用css实现文本和图片垂直水平居中

    关于用css实现文本和图片垂直水平居中   一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...

  5. Java对【JSON数据的解析】--fastjson解析法

    要求:解析下面JSON数据 String string = "{no:1,name:'Android',employees:[{name:'zhangsan',age:20},{name:' ...

  6. 逻辑卷管理lvm

    逻辑卷管理LVM 一 创建逻辑卷 1准备分区或硬盘 这里使用/dev/sdb./dev/sdc两块硬盘和/dev/sda9./dev/sda10两个分区,大小都为1G,磁盘有限,我也不想这么抠的. 添 ...

  7. require 增量更新与版本管理

    使用require.js 加载JS文件时,当JS文件有更新,可以通过更改全局版本号( urlArgs : 'v=1'),告诉浏览器加载新的文件. 但该方法虽然使用方便,但美中不足的是有些不需要更新的文 ...

  8. JDBC加载数据库驱动的方式

    JDBC作为数据库访问的规范接口,其中只是定义一些接口.具体的实现是由各个数据库厂商来完成. 一.重要的接口: 1.public interface Driver 每个驱动程序类必须实现的接口.Jav ...

  9. asp.net(c#) 将dbf转换为xls或wps，并将数据的列名改成中文；并判断本机是否安装office2003,2007和wps2007,2010

    using Microsoft.Office.Interop.Excel;//转换为excel时,需要引用此命名空间 using ET;//转换为wps时,需要引用此命名空间using KSO;//转 ...

  10. 静态库 .a 转成共享库 .so

    .a 是有一系列 .o 文件通过 ar 程序打包在一起的静态库,要把它转成动态库只需先解开,生成一堆 .o 文件,再通过编译器(比如 gcc 或 ifort,视具体情况而定)编成动态库即可. ar - ...