<!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. day2--计算机基础

    一.服务器 1u服务器,1u=4.45cm 戴尔服务器种类: 电脑主机组成 主板.CPU.内存.硬盘.显卡.声卡等等. 运维关注三大部件:CPU.内存.硬盘(Disk) 电源,考虑使用双电服务器,电源 ...

  2. 关于c# SESSION丢失问题解决办法

    我们在用C#开发程序的时候经常会遇到Session很不稳定,老是数据丢失.下面就是Session数据丢失的解决办法希望对您有好处.1.在WEB.CONFIG文件中修改SESSION状态保存模式,如:& ...

  3. Spark之MapReduce原理

    参考http://www.cnblogs.com/wuyudong/p/mapreduce-principle.html MapReduce   我们来拆开看: Mapping(映射)对集合里的每个目 ...

  4. python基础（一）------Python基础语法与介绍

    编程语言的历史和Python开发 一.编程语言 1.编程语言也是"语言"与英语,汉语等类似,掌握其语法结构,灵活 的运用其语法规则为之重要.          编程语言实现的是程序 ...

  5. pt-query-digest

    pt-query-digest默认查询时间分布 # Query_time distribution # 1us # 10us ##################################### ...

  6. Vue.js—实现图书管理系统

      前  言 今天我们主要一起来学习一个新框架的使用--Vue.js,之前我们也讲过AngularJS是如何使用的,而今天要讲的Vue.js的语法和AngularJS很相似,因为 AngularJS ...

  7. Lucene入门-安装和运行Demo程序

    Lucene版本:7.1 一.下载安装包 https://lucene.apache.org/core/downloads.html 二.安装 把4个必备jar包和路径添加到CLASSPATH \lu ...

  8. CCLuaObjcBridge - Lua 与 Objective-C 互操作的简单解决方案

    http://dualface.github.io/blog/2013/01/27/call-objectivec-from-lua/ 月初的时候,发了一篇关于 Lua 与 Java 互操作的文章,里 ...

  9. CS窗体程序数据列表分页

    以前,觉得winform程序分页很无趣,也没实际意义,直到近期的项目实践中让我认识到原来winform数据列表分页也是非常有必要的,因为由于数据量过大的情况,当窗体在初始加载数据的时候如果不做条件的限 ...

  10. 裸板驱动总结(makefile+lds链接脚本+裸板调试)

    在裸板2440中,当我们使用nand启动时,2440会自动将前4k字节复制到内部sram中,如下图所示: 然而此时的SDRAM.nandflash的控制时序等都还没初始化,所以我们就只能使用前0~40 ...