只需改变参数就能画出你想要的多边形，代码简单！不得不惊叹canvas的强大！

代码奉上

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="gb2312">
  5. <title>画图</title>
  6. </head>
  7.  
  8. <body>
  9.   <canvas id = "myCanvas" width = '500' height = '500'>Canvas画线技巧</canvas>
  10. <script>
  11.     var myCanvas = document.getElementById("myCanvas");
  12.     var context =  myCanvas.getContext("2d");
  13.         function drawPath(x, y, n, r)
  14.         {
  15.                 var i,ang;
  16.                 ang = Math.PI*2/n //旋转的角度
  17.                 context.save();//保存状态
  18.                 context.fillStyle ='rgba(255,0,0,.3)';//填充红色，半透明
  19.                 context.strokeStyle ='hsl(120,50%,50%)';//填充绿色
  20.                 context.lineWidth = 1;//设置线宽
  21.                 context.translate(x, y);//原点移到x,y处，即要画的多边形中心
  22.                 context.moveTo(0, -r);//据中心r距离处画点
  23.                 context.beginPath();
  24.                 for(i = 0;i < n; i ++)
  25.                 {
  26.                         context.rotate(ang)//旋转
  27.                         context.lineTo(0, -r);//据中心r距离处连线
  28.                 }
  29.                 context.closePath();
  30.                 context.stroke();
  31.                 context.fill();
  32.                 context.restore();//返回原始状态
  33.         }
  34.         drawPath(100, 100, 3, 40)//在100,100处画一个半径为40的三边形
  35.         drawPath(200, 100, 4, 40)//在200,100处画一个半径为40的四角形
  36.         drawPath(300, 100, 5, 40)//在300,100处画一个半径为40的五边形
  37.         drawPath(100, 200, 6, 40)//在100,200处画一个半径为40的六边形
  38.         drawPath(200, 200, 7, 40)//在100,200处画一个半径为40的七边形
  39.         drawPath(300, 200, 7, 40)//在300,200处画一个半径为40的八边形
  40. </script>
  41. </body>
  42. </html>

一个给力的html5 画多边形的例子的更多相关文章

  1. iOS-CGContextRef画各种图形例子

    iOS-CGContextRef画各种图形例子 绘制效果图 绘制代码 - (void)drawRect:(CGRect)rect { //一个不透明类型的Quartz 2D绘画环境,相当于一个画布,你 ...

  2. 超给力的HTML5 3D动画欣赏及源码下载

    HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...

  3. 【转】C# 串口操作系列(1) -- 入门篇，一个标准的，简陋的串口例子。

    C# 串口操作系列(1) -- 入门篇,一个标准的,简陋的串口例子. 标签: c#objectnewlineexceptionbytestring 2010-05-17 01:10 117109人阅读 ...

  4. 使用Java、Matlab画多边形闭合折线图

    由于写论文要将“哈密顿回路问题(TSP)”的求解中间结果表示出来,查了一下使用程序画多边形图形.现在在总结一下,这个图是“由给定节点首尾相连的”闭合多边形. 1.使用matlab作闭合多边形图 没有找 ...

  5. 【编程漫谈】用JAVA画多边形

    一门语言只要带图形库就可以编程画图了,用JAVA画图有两种方式,一是在内存中画好然后生成图片,就可以看到画图的效果了.另一个就是在窗口界面上直接画,可以实时看到程序的运行效果.刚开始学编程的时候,我加 ...

  6. 最全vue的vue-amap使用高德地图插件画多边形范围

    一.在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下: import Vue from 'vue' import VueAMap from 'vue-amap' ...

  7. 查看某一个点是否在某个多边形内 使用ST_Contains函数

    查看某一个点是否在某个多边形内  使用ST_Contains函数 --LINESTRING ( 121.312350 30.971457 , 121.156783 31.092221 , 121.35 ...

  8. 一个layer可以跟着画完的线移动ios程序 好玩啊。

    用法:采用的是关键帧实现的. 实验目的:让上层的layer子层能够跟着在另一个子层上花的线进行移动 .即当线画完之后,图形开始移动,并且能够停在最后的那个位置 效果图: 采用是直接在layer图层上进 ...

  9. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. 还是log4net的使用

    最近做个项目要用到日志系统,这这可把我给难住了,后来问了下度娘,发现只有你想不到的,没有那些找不到的开源组件,后来发现了log4net,但是我是控制台程序,没有个实例还真不好搞,想想还是看看他的运行过 ...

  2. CRM odata方法 js容易出现的错误，大小写区分 Value Id

    Id Value  注意大小写,I大写,V大写,typeResults.result[0].yt_category.Value; 否则会报 错,Result.yt_businessunit_terri ...

  3. 学习C++语言的50条忠告

    50条忠告:(其中有几条觉得写的不够贴切,所以删了,发了余下的部分) 1.把C++当成一门新的语言学习: 2.看<Thinking In C++>,不要看<C++变成死相>: ...

  4. PHP Curl CURLOPT_POSTFIELDS 1024

    resolve : curl_setopt($ch, CURLOPT_HTTPHEADER, array('Expect:')); url: http://www.laruence.com/2011/ ...

  5. Android 中退出程序的几种方法

    1.finish()方法 finish是Activity的类,仅仅针对Activity,当调用finish()时,只是将活动推向后台,并没有立即释放内存,活动的资源并没有被清理:调用finish()方 ...

  6. phpStrom添加插件:php文档生成(phpDocumentor)

    1. 依次打开:Files => Settings => External Tools => +(add) 2. 填写信息:name:phpDoc; group:PHP插件; des ...

  7. 重拾php---以及zend-studio 的使用快捷方式

    感觉好久没有碰php了,今天心血来潮,重新入门.先整理一下刚刚学习的笔记. 一个字符串是用双引号括起来的一个词或一个句字,比如:“Hi,imooc!”.你可以用PHP语言输出把这个字符串输出,像这样: ...

  8. CDC不同模式在ODI体现系列之二 异步模式

    CDC不同模式在ODI体现系列之二 异步模式 2 异步模式需要在数据库中做一些准备工作: 改数据为归档并启用logminer: SQL> shutdown immediate 数据库已经关闭. ...

  9. M​i​c​r​o​s​o​f​t​ ​w​e​b​ ​a​p​p​l​i​c​a​t​i​o​n​ ​s​t​r​e​s​s​ ​t​o​o​l​ 测试

    一.准备工作 为了测试数据的准备性,首先需要删除缓存和Cookies等临时文件.启动IE后打开“工具”菜单下的“Internet”选项命令,在打开的“Internet选项”窗口的“常规”选项卡中,单击 ...

  10. poj1665

    #include <stdio.h> #include <stdlib.h> #define pi 3.1415926 int main() { float dia,tim; ...