<!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. 微信小程序入门（一）

    想必当你对官方文档了解地差不多的时候,一颗跃跃欲试的心就开始骚动了吧. 开发小程序之前的准备工作: 1).准备一个域名 2).准备一台云服务器 3).搭建小程序的后台,博主的小程序后台请求的的是自己写 ...

  2. js判断对象为空 JSON.stringify(obj)

    JSON.stringify(obj) : 用于从一个对象解析出字符串 var c = {}; if(JSON.stringify(obj) == "{}"){ console.l ...

  3. c# 小小备忘录

    一.简述 备忘录,相信大家生活中都使用过,比如记笔记.手机备忘录等等,这些都是记录自己灵感时所想.定期内想做的事情,好像跑题了,说说我的备忘录吧,我的备忘录功能上也就是增删改查的操作,另加到时提醒.语 ...

  4. ARM1

    CPU有取指周期,译码周期,执行周期包括的器件有程序计数器(CP),指令cache,数据总线,指令寄存器(IR),数据地址寄存器(AR),指令译码器,时序发生器操作控制器,控制总线,数据缓冲寄存器(D ...

  5. SDN/NFV趋势思考点滴

    一.为什么控制器.网管OSS融合? 1.云化是趋势:传统网络架构管理规模达到瓶颈:微服务架构通过扩充多实例解决管理规模问题.2.NFV是趋势:设备运营商传统网元在云化,以软件形式提供VNF:3.运维体 ...

  6. Redis安装及使用笔记

    windows下安装Redis 1.下载Redis的软件包 Redis on github; 2.将软件解压到服务器软件目录; 3.在命令行运行此命令: ./redis-server redis.wi ...

  7. Git版本控制管理教程(一)：介绍

    我的个人博客地址:damienzhong.com 原文链接:点击打开链接 1.1 背景 数据是短暂的,且容易丢失的,特别是作为开发人员的我们每天频繁的对项目代码进行更新,容易产生错误代码的变更或者项目 ...

  8. 【SpringMVC】使用Myeclipse创建SpringMVC项目【超详细教程】

    之前一直是使用Eclipse创建Web项目,用IDEA和MyEclipse的创建SpringMVC项目的时候时不时会遇到一些问题,这里把这个过程记录一下,希望能帮助到那些有需要的朋友.我是用的是MyE ...

  9. input常见类型

       值   描述  text   默认.定义单行输入字段,用户可在其中输入文本.默认是 20 个字符  button   定义可点击的按钮(大多与 JavaScript 使用来启动脚本)  chec ...

  10. 小程序web-view组件

    不久前微信小程序发布了web-view组件,这个消息在各个圈里引起不小的涟漪.近期正好在做小程序的项目,便研究了一下这个让大家充满期待的组件.   1,web-view这个组件是什么鬼? 官网的介绍: ...