<!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. thinkphp碰到的一些小问题

    1. 生成的html自动被去掉换行和空格,压缩挤到一起了. 解决: 开启debug即可,在入口文件增加 define("APP_DEBUG",true); 2. 添加mysql的 ...

  2. 【机器学习】TensorFlow学习（一）

    感谢中国人民大学胡鹤老师,课讲得非常好~ 首先,何谓tensor?即高维向量,例如矩阵是二维,tensor是更广义意义上的n维向量(有type+shape) TensorFlow执行过程为定义图,其中 ...

  3. 比较DataTable中新旧数据

    内容不写了,代码上都做了写注释. 1   /**//// <summary>  2        /// 比较两个数据表,并返回比较结果表  3        /// 比较条件:  4   ...

  4. NULL字段对于UNIQUE INDEX失效

  5. 脱掉Golang的第一层衣裳 golang入坑系列

    读前必读,博客园的文章并非最新,想看最新还是建议点击这里.博客园的文章是为了方便不能FQ的同学,同步而来的.不放在博客园,不是不支持国产,而是博客园的排版太难看了,太难看了,太难看了!而且还没有客户端 ...

  6. less简述

       什么是less? 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, ...

  7. MySQL分类表设计--根据ID删除全部子类

    在做数据库分类表的时候,通常会有这样的设计:一个字段是ID,另一个字段PID,PID指向自己的上级分类: 这样的设计带来的问题是:我要删除一个类,我希望它的子类全部一起删除: 在不知道分类有多少层级的 ...

  8. POJ1273 网络流-->最大流-->模板级别-->最大流常用算法总结

    一般预流推进算法: 算法思想: 对容量网络G 的一个预流f,如果存在活跃顶点,则说明该预流不是可行流. 预流推进算法就是要选择活跃顶点,并通过它把一定的流量推进到它的邻接顶点,尽可能将正的赢余减少为0 ...

  9. Nginx负载均衡的优缺点

    Nginx的优点是: 1.工作在网络的7层之上,可以针对http应用做一些分流的策略,比如针对域名.目录结构,它的正则规则比HAProxy更为强大和灵活,这也是它目前广泛流行的主要原因之一,Nginx ...

  10. ThinkPHP 5 中AJAX跨域请求头设置方法

    最近用thinkphp做项目,在测试环境时,存在接口的测试问题.在tp官网也没能找到相关的解决方法.自已看了一下源码,有如下的解决方案. 在项目目录下面,创建common/behavior/CronR ...