<!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. Java实现邮箱发送验证码

    第一步,导入JAR包,JAR包下载地址[http://pan.baidu.com/s/1kVRvGyF] 正式代码: 首先书写一个工具类: MailUtil import javax.mail.*; ...

  2. Maven元素解析——pom.xml

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6628201.html  一个pom.xml中包含了许多标签,各个标签是对项目生命周期.依赖管理的配置.常用的主 ...

  3. SQL Server多表同时查询

    今天在练sql server发现多条语句同时使用可以多表同时查询,具体操作如下: 代码示例: USE teachingGOSELECT *FROM dbo.teach_classORDER BY cl ...

  4. 2017-11-22 Intall Ubuntu Log

    重启之后进入不了系统,安装工具check defect也不好用(问题尚不清楚),决定重做系统 直接用u盘(Universal_USB_Installer制作的安装工具,之前用都没有问题)安装,前面一起 ...

  5. Android WebView 上传各种文件(包括拍照 录像 录音 文件 音乐 等，用到图片或拍照的，可以参考下)

    我也是从网上扒下来的,经过多次实验,找到了个好用的.网上能搜到最多的也就是这个解决方案,我英文不好,也没仔细研究,但大多数都是出自这: http://stackoverflow.com/questio ...

  6. 【Python】三个例子教你写代码

    这篇文章包括用Python编写的斐波那契数列,三位数的水仙花数和百钱买百鸡的基础代码: (一)斐波那契数列: ''' def hanshu(n): n_1 = 1 n_2 = 1 m = n sumn ...

  7. canvas 粒子效果

    var canvas = document.createElement('canvas'); var cxt = canvas.getContext('2d'); var W = canvas.wid ...

  8. 《java.util.concurrent 包源码阅读》03 锁

    Condition接口 应用场景:一个线程因为某个condition不满足被挂起,直到该Condition被满足了. 类似与Object的wait/notify,因此Condition对象应该是被多线 ...

  9. android stdio 快捷键

    俗话说工欲善其事必先利其器,先熟悉快捷键是很有必要的                 IDE   按键                                                 ...

  10. SSM框架开发web项目系列（二） MyBatis真正的力量

    前言 上篇SSM框架环境搭建篇,演示了我们进行web开发必不可少的一些配置和准备工作,如果这方面还有疑问的地方,可以先参考上一篇“SSM框架开发web项目系列(一) 环境搭建篇”.本文主要介绍MyBa ...