JavaScript+canvas 绘制多边形

时间：2022-09-25 20:41:37

效果图：

JavaScript+canvas 绘制多边形

<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. 学习笔记：HTML5 Canvas绘制简单图形

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

  6. &lbrack;WebGL入门&rsqb;十四，绘制多边形

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

  7. HTML5学习总结——canvas绘制象棋&lpar;canvas绘图&rpar;

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

  8. HTML5 Canvas绘制转盘抽奖

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

  9. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

随机推荐

  1. MSSQLServer中组织或分类表的设计及其递归查询

    开篇:项目中用到上下级从属关系的太多太多了,如:组织.分类.行政区域,这里不再一一介绍,遇到这种的如何去进行数据库表的设计及其应用的,个人对往期项目中所涉及到的进行了一些总结. 数据库表设计:表字段一 ...

  2. DevExpress中的ASPxTreeView 递归显示checknodes并获得选中值

    aspx代码 <dx:ASPxTreeView ID="ASPxTreeView1" runat="server"> </dx:ASPxTre ...

  3. Xcode配置&period;pch文件

    --到Xcode7都可以这么解决.亲测. 发现一个好东西.就是这个.pch文件.我的理解是他里面存放了我们在各个controller里面需要的头文件,那这样一来,就免去了在不同的ViewControl ...

  4. Reading Csv Files with Text&lowbar;io in Oracle D2k Forms

    Below is the example to read and import comma delimited csv file in oracle forms with D2k_Delimited_ ...

  5. CSS构造表单

    结构化表单布局 <head> <meta http-equiv="Content-Type" content="text/html; charset=G ...

  6. C&num;学习日志 day7 --------------LINQ与Lamda语句的初步尝试以及XML的生成

    LINQ是一种集成在计算机语言里的信息查询语句,是c#3.0中最惹人瞩目的功能. 在C#中,LINQ语句有两种写法. 第一种写法与SQL语句类似: IEnumerable<Customer&gt ...

  7. 【ASP&period;NET MVC 学习笔记】- 19 REST和RESTful Web API

    本文参考:http://www.cnblogs.com/willick/p/3441432.html 1.目前使用Web服务的三种主流的方式是:远程过程调用(RPC),面向服务架构(SOA)以及表征性 ...

  8. php中sql语句常见错误

    .php文件中sql语句的写法导致的错误如下: 1.$logSql="select * from jd_login where uname=".$u."and upwd= ...

  9. oracle树形结构层级查询之start with &period;&period;&period;&period;connect by prior、level、order by以及sys&lowbar;connect&lowbar;by&lowbar;path之浅谈

    浅谈oracle树状结构层级查询 oracle树状结构查询即层次递归查询,是sql语句经常用到的,在实际开发中组织结构实现及其层次化实现功能也是经常遇到的,虽然我是一个java程序开发者,我一直觉得只 ...

  10. shell脚本--函数

    shell的函数和Javacript和php的函数声明一样,只不过shell在调用函数的时候,只需要写函数名就可以调用函数,注意不要在函数名后面加括号 创建并使用函数 #!/bin/bash #文件名 ...

相关文章