1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas绘制多边形</title>
  6. </head>
  7. <body>
  8. <canvas id="canvas" style="border: 1px solid darkcyan;" width="400" height="400"></canvas>
  9.  
  10. <script>
  11.     var c = document.getElementById("canvas").getContext("2d");
  12.     //定义一个以（x,y）为中心，半径为r的规则n边型；
  13.     //每个顶点都是均匀分布在圆周上
  14.     //将第一个顶点放置在最上面，或者指定一定角度
  15.     //除非最后一个参数是true，否则顺时针旋转
  16.     function polygon(c,n,x,y,r,angle,counterClockwise) {
  17.         angle = angle || 0;
  18.         counterClockwise = counterClockwise || false;
  19.         c.moveTo(x+r*Math.sin(angle),y-r*Math.cos(angle));
  20.         var delta = 2*Math.PI/n;
  21.         for(var i=1;i<n;i++){
  22.             angle+=counterClockwise?-delta:delta;
  23.             c.lineTo(x+r*Math.sin(angle),y-r*Math.cos(angle));
  24.         }
  25.         c.closePath();
  26.     }
  27.     c.beginPath();
  28.     polygon(c,3,50,70,50);
  29.     polygon(c,4,150,60,50,Math.PI/4);
  30.     polygon(c,5,255,55,50);
  31.  
  32.     c.fillStyle = "#ccc";
  33.     c.strokeStyle = "#008";
  34.     c.lineWidth = 5;
  35.     c.fill();
  36.     c.stroke();
  37. </script>
  38. </body>
  39. </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. TFS在项目中Devops落地进程（上）

    经过近2年折腾,基于TFS的Devops主线工程大体落地完毕.在此大体回忆下中间的各种历程. 开始之前简单说下什么是TFS(Team Foundation Server). TFS是微软推出的一款AL ...

  2. 浅谈字体小图标font awesome，iconfont，svg各自优缺点

    三种都是矢量图(即放大不失真),但是个自又有个自的优缺点, 1.font awesome: 优点:相对比较简单,查看官网看例子基本上都会用 (http://www.bootcss.com/p/font ...

  3. elastic-search单机部署以及中文分词IKAnalyzer安装

    前提条件 elasticsearch使用版本5.6.3,需要jdk版本1.8,低于该版本不能使用 下载 https://artifacts.elastic.co/downloads/elasticse ...

  4. C#调用DLL文件时参数对应表

    Wtypes.h中的非托管类型  非托管 C语言类型    托管类名               说明HANDLE                  void*               Syste ...

  5. Mac上配置不同版本的JDK

    Mac上JDK的版本为1.8,编译AOSP时发现需要JDK 1.7.想找一种比较容易切换JDK版本的方式,经过一番Google发现Jenv比较合适. 安装Jenv至少有三种方式: - $ git cl ...

  6. 配置ssh免密码登陆

      以root账户为例 准备两台以上的Linux服务器,我这里用的是s204,s205两台机器,多台同样的 先使用ssh登录试一下,如果没有安装则需要先安装一下 ssh s205会提示你输入密码 原理 ...

  7. 【O】VSS 2005上传PDF文件之后，打开提示文件损坏或者内容为空

    问题: VSS 2005上传PDF文件之后,打开提示文件损坏或者内容为空: 解决方式: 在vss的客户端的tools-option中,file type选项卡里,在binary file文本框中,加入 ...

  8. Winform界面中主从表编辑界面的快速处理

    在Winform开发中,我们往往除了常规的单表信息录入外,有时候设计到多个主从表的数据显示.编辑等界面,单表的信息一般就是控件和对象实体一一对应,然后调用API保存即可,主从表就需要另外特殊处理,本随 ...

  9. key-value存储数据库--Redis

    1.简介 Redis是完全开源的ANSI C语言编写.遵守BSD协议,高性能的key-value数据库. 1.1特点 Redis支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次加载 ...

  10. webstorm激活破解码+++使用技巧

    Webstorm激活破解码 2017-06-15更新 之前都是使用2017.2.27的方法,版本是2017.1.1,还没提示过期,但是根据评论说这个链接已经失效了,评论也给出了个新地址:http:// ...