<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas绘制多边形</title>

</head>

<body>

<canvas id="canvas" style="border: 1px solid darkcyan;" width="400" height="400"></canvas>

<script>

    var c = document.getElementById("canvas").getContext("2d");

    //定义一个以（x,y）为中心，半径为r的规则n边型；

    //每个顶点都是均匀分布在圆周上

    //将第一个顶点放置在最上面，或者指定一定角度

    //除非最后一个参数是true，否则顺时针旋转

    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();

    }

    c.beginPath();

    polygon(c,3,50,70,50);

    polygon(c,4,150,60,50,Math.PI/4);

    polygon(c,5,255,55,50);

    c.fillStyle = "#ccc";

    c.strokeStyle = "#008";

    c.lineWidth = 5;

    c.fill();

    c.stroke();

</script>

</body>

</html>

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

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

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

  2. JavaScript+canvas 绘制多边形

    效果图: <body> <canvas id="square" width="500"></canvas> <canv ...

  3. （三）canvas绘制样式

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

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

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

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

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

  6. Canvas绘制不规则图形，实现可拖动，编辑--V1.0第一篇

    目前的工作在做在线的标注工具,接触canvas一年了,各种绘制,基本上图像的交互canvas都可以完成,也写了几篇关于canvas的文章,遇到的问题也写博客上了,对于canvas有问题的朋友可以去看看 ...

  7. Canvas学习：封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  8. JS实现鼠标点击爱心&绘制多边形&每日一言功能

    本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...

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

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

随机推荐

  1. 2000W条数据,加入全文检索的总结

    一) 前期准备测试: 旧版的MySQL的全文索引只能用在MyISAM表格的char.varchar和text的字段上. 不过新版的MySQL5.6.24上InnoDB引擎也加入了全文索引,所以具体信息 ...

  2. 在游览器上可以连网，Ionic打包后不能连接网络

    在游览器上可以连网,Ionic打包后不能连接网络.可能是没有安装cordova-plugin-whitelist插件.  解决方案:

  3. 常见的dom操作----原生JavaScript与jQuery

    1.创建元素 文本节点 JavaScript: document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如: var newDiv = document. ...

  4. Scrum Meeting Alpha - 2

    Scrum Meeting Alpha - 2 NewTeam 2017/10/25 地点:新主楼F座二楼 任务反馈 团队成员 完成任务 计划任务 安万贺 完成了大部分api的测试https://gi ...

  5. 71、django之Ajax续

    接上篇随笔.继续介绍ajax的使用. 上篇友情连接:http://www.cnblogs.com/liluning/p/7831169.html 本篇导航: Ajax响应参数 csrf 跨站请求伪造 ...

  6. CSS和文档

    1. 块级元素: p,div,ul,ol,h1,h2 . . . h6等.块级元素独占一行,旁边不能有其他元素. 2. 行内元素:span,a,strong,em等. display属性可以使块级元素 ...

  7. Request 和 Response 区别

    Request 和 Response 对象起到了服务器与客户机之间的信息传递作用.Request 对象用于接收客户端浏览器提交的数据,而 Response 对象的功能则是将服务器端的数据发送到客户端浏 ...

  8. PowerShell 操作 Azure Blob Storage

    本文假设已经存在了一个 Azure Storage Account,需要进行文件的上传,下载,复制,删除等操作.为了方便查看 PowerShell 代码执行的结果,本文使用了 MS 发布的一个 Azu ...

  9. insert时报Cannot add or update a child row: a foreign key constraint fails (`yanchangzichan`.`productstatusrecord`, CONSTRAINT `p_cu` FOREIGN KEY (`cid`) REFERENCES `customer` (`cid`))错误

    mybatis在insert时报Cannot add or update a child row: a foreign key constraint fails (`yanchangzichan`.` ...

  10. 一步一步搞懂支持向量机——从牧场物语到SVM（上）

    之前在数据挖掘课程上写了篇关于SVM的"科普文",尽量通俗地介绍了SVM的原理和对各公式的理解.最近给正在初学机器学习的小白室友看了一遍,他觉得"很好,看得很舒服&quo ...