canvas绘图详解-06-绘制一个五角星-常用绘图原理
先讲如何画一个正规的五角星
在五角星的内外画两个圆,五角星有五个角,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-绘制一个五角星-常用绘图原理的更多相关文章
- 【转】Android Canvas绘图详解(图文)
转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡 ...
- canvas绘图详解笔记之线条及线条属性
创建 canvas 首先创建一个canvas元素,我们只需要在html文件中加入这么一句代码: <canvas id="canvas">当前浏览器不支持canvas,请 ...
- iOS 2D绘图详解(Quartz 2D)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)
前言:一个路径可以包含由一个或者多个shape以及子路径subpath,quartz提供了很多方便的shape可以直接调用.例如:point,line,Arc(圆弧),Curves(曲线),Ellip ...
- Cookie 详解以及实现一个 cookie 操作库
Cookie 详解以及实现一个 cookie 操作库 cookie 在前端有着大量的应用,但有时我们对它还是一知半解.下面来看看它的一些具体的用法 Set-Cookie 服务器通过设置响应头来设置客户 ...
- 图文详解 Android Binder跨进程通信机制 原理
图文详解 Android Binder跨进程通信机制 原理 目录 目录 1. Binder到底是什么? 中文即 粘合剂,意思为粘合了两个不同的进程 网上有很多对Binder的定义,但都说不清楚:Bin ...
- Android Canvas绘图详解(图文)
编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! Andr ...
- 【转】Android Canvas绘图详解
转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android中使用图形处理引擎,2D部分是an ...
- canvas详解---矩形绘制
首先,就上述绘制弧线的章节进行一个小小的补充: 如果我们使用了context.beginPath();紧接着后面的context.moveTo(x,y),可以改为context.lineTo(x,y) ...
- Matlab绘图详解
Matlab绘图 强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到所需图形,这类函数称为高层绘图函数.此外,M ...
随机推荐
- Ubuntu上CUDA和CUDNN的安装
Ubuntu上CUDA的安装 下载路径: CUDA下载 `sudo dpkg -i cuda-repo-ubuntu1504-7-5-local_7.5-18_amd64.deb` `sudo apt ...
- pymongo一次更新多条数据
db.collection.update(query, update, upsert, multi) pymongo使用示例 db.collection.update({}, {'$set' : {' ...
- HTML学习(八)列表和块
无序列表无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记.无序列表始于 <ul> 标签.每个列表项始于 <li>.<ul type=“”> ...
- 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 ...
- iOS开发中涉及的字体问题
iOS中常见3种方法来控制字体,下面根据我在网上学习总结的内容发布(已完美避过所有坑,iOS8.4) 一.系统默认的设置字体方法(只对英文和数字生效的方法) 1.系统默认提供的字体主要是指UIFont ...
- usb开发
usb开发 USB HID报告及报告描述符简介 LibUSB通过SetReport()请求与USBHID设备通信 libusb开发者指南 USB枚举和HID枚举实例 USB命令 BusHound数据分 ...
- sqlserver修改增删改字段
---新增列 alter table article add addtime0 datetime ---修改列 alter table article ) --删除列 alter table arti ...
- 搭建NDK环境
2014.07.14 搭建OK,但是目前只能手动编译c代码,具体不清楚.
- iOS 之 设置控件在视图中心位置
_qrImgView.bounds = CGRectMake(0, 0, sizeImg, sizeImg); _qrImgView.center = CGPointMake(CGRectGetWid ...
- iOS 之 获取View所在控制器
1. UIResponder UIViewController *uvc; UIResponder* nextResponder = [self.superview.superview.supervi ...