先讲如何画一个正规的五角星

在五角星的内外画两个圆,五角星有五个角,360/5=72度

所以得出这两个角的度数

然后算出这两个点坐标

角度转弧度

角度/180*Math.PI

所以外顶点坐标 x:  Math.cos( (18+72*i)/180*Math.PI) * R

y:  Math.sin((18+72*i)/180*Math.PI) * R

所以内顶点坐标 x:  Math.cos( (54+72*i)/180*Math.PI) * r

y:  Math.sin((54+72*i)/180*Math.PI) * r

下面是画一个不同角度不同大小的五角星的函数

function drawStar( cxt , r , R , x , y , rot , borderWidth , borderStyle , fillStyle){
cxt.beginPath();
for( var i = 0 ; i < 5 ; i ++){
cxt.lineTo(Math.cos((18+72*i - rot)/180*Math.PI) * R + x ,- Math.sin((18+72*i - rot )/180*Math.PI) * R + y);
cxt.lineTo(Math.cos((54+72*i - rot)/180*Math.PI) * r + x ,- Math.sin((54+72*i - rot )/180*Math.PI) * r + y);
}
cxt.closePath(); cxt.lineWidth = borderWidth;
cxt.strokeStyle = borderStyle;
cxt.fillStyle = fillStyle; cxt.fill();
cxt.stroke();
}

以上基于圆型来算顶点坐标的方法是常用方法

canvas绘图详解-06-绘制一个五角星-常用绘图原理的更多相关文章

  1. 【转】Android Canvas绘图详解(图文)

    转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡 ...

  2. canvas绘图详解笔记之线条及线条属性

    创建 canvas 首先创建一个canvas元素,我们只需要在html文件中加入这么一句代码: <canvas id="canvas">当前浏览器不支持canvas,请 ...

  3. iOS 2D绘图详解(Quartz 2D)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)

    前言:一个路径可以包含由一个或者多个shape以及子路径subpath,quartz提供了很多方便的shape可以直接调用.例如:point,line,Arc(圆弧),Curves(曲线),Ellip ...

  4. Cookie 详解以及实现一个 cookie 操作库

    Cookie 详解以及实现一个 cookie 操作库 cookie 在前端有着大量的应用,但有时我们对它还是一知半解.下面来看看它的一些具体的用法 Set-Cookie 服务器通过设置响应头来设置客户 ...

  5. 图文详解 Android Binder跨进程通信机制 原理

    图文详解 Android Binder跨进程通信机制 原理 目录 目录 1. Binder到底是什么? 中文即 粘合剂,意思为粘合了两个不同的进程 网上有很多对Binder的定义,但都说不清楚:Bin ...

  6. Android Canvas绘图详解(图文)

    编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! Andr ...

  7. 【转】Android Canvas绘图详解

    转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android中使用图形处理引擎,2D部分是an ...

  8. canvas详解---矩形绘制

    首先,就上述绘制弧线的章节进行一个小小的补充: 如果我们使用了context.beginPath();紧接着后面的context.moveTo(x,y),可以改为context.lineTo(x,y) ...

  9. Matlab绘图详解

    Matlab绘图 强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到所需图形,这类函数称为高层绘图函数.此外,M ...

随机推荐

  1. Ubuntu上CUDA和CUDNN的安装

    Ubuntu上CUDA的安装 下载路径: CUDA下载 `sudo dpkg -i cuda-repo-ubuntu1504-7-5-local_7.5-18_amd64.deb` `sudo apt ...

  2. pymongo一次更新多条数据

    db.collection.update(query, update, upsert, multi) pymongo使用示例 db.collection.update({}, {'$set' : {' ...

  3. HTML学习(八)列表和块

    无序列表无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记.无序列表始于 <ul> 标签.每个列表项始于 <li>.<ul type=“”> ...

  4. mysql 之SQL语句--NSERT SELECT ON DUPLICATE KEY UPDATE的写法

    Table source CREATE TABLE `source` ( `key` int(11) NOT NULL AUTO_INCREMENT, `data` int(11) DEFAULT N ...

  5. iOS开发中涉及的字体问题

    iOS中常见3种方法来控制字体,下面根据我在网上学习总结的内容发布(已完美避过所有坑,iOS8.4) 一.系统默认的设置字体方法(只对英文和数字生效的方法) 1.系统默认提供的字体主要是指UIFont ...

  6. usb开发

    usb开发 USB HID报告及报告描述符简介 LibUSB通过SetReport()请求与USBHID设备通信 libusb开发者指南 USB枚举和HID枚举实例 USB命令 BusHound数据分 ...

  7. sqlserver修改增删改字段

    ---新增列 alter table article add addtime0 datetime ---修改列 alter table article ) --删除列 alter table arti ...

  8. 搭建NDK环境

    2014.07.14 搭建OK,但是目前只能手动编译c代码,具体不清楚.

  9. iOS 之 设置控件在视图中心位置

    _qrImgView.bounds = CGRectMake(0, 0, sizeImg, sizeImg); _qrImgView.center = CGPointMake(CGRectGetWid ...

  10. iOS 之 获取View所在控制器

    1. UIResponder UIViewController *uvc; UIResponder* nextResponder = [self.superview.superview.supervi ...