新年第一个目标一张表盘串讲所有canves的知识点
我们的目标
- 首先是canves的坐标系统,基于浏览器的左上角为原点,x,y轴为正方向的坐标系统。
- 首先初始化,打标签
<canvas id="canvas" height="400" width="400"></canvas>
- 然后我们获取到 canvas 对象。
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
- 绘制圆弧
context.beginPath();
//x,y,r,from,to
context.arc(200, 200, 120, 0, 2 * Math.PI);
context.stroke();
- 绘制数字
for (var a = 1; a < 13; a++) {
context.save();
context.font = "20px Microsoft YaHei UI";
context.textAlign = 'center';
context.textBaseline = "middle";
context.translate(
200 + 100 * (Math.sin(Math.PI * 2 / 12 * a)),
200 - 100 * (Math.cos(Math.PI * 2 / 12 * a)));
context.rotate(2 * Math.PI / 12 * a);
context.fillText(a, 0, 0);
context.restore()
}
绘制数字比较难,我们进行讲解。
保存现场
context.save();
我们需要算出1点的的坐标位置。
其中200,200是圆心。100是半径
200 + 100 * (Math.sin(Math.PI * 2 / 12 * a)),
200 - 100 * (Math.cos(Math.PI * 2 / 12 * a)));
我们把坐标系平移到这来。将0 0 点移动到这来。
context.translate(
200 + 100 * (Math.sin(Math.PI * 2 / 12 * a)),
200 - 100 * (Math.cos(Math.PI * 2 / 12 * a)));
我们进行旋转。
context.rotate(2 * Math.PI / 12 * a);
最后绘制并恢复原位
context.fillText(a, 0, 0);
context.restore();
最后我们强调。
context.save();
context.restore();
是成双成对出现的。
新年第一个目标一张表盘串讲所有canves的知识点的更多相关文章
- 0607pm克隆&引用类&加载类&面向对象串讲&函数重载
克隆class Ren{ public $name; public $sex; function __construct($n,$s) { $this->name=$n; $this->s ...
- 视频+图文串讲:MySQL 行锁、间隙锁、Next-Key-Lock、以及实现记录存在的话就更新,如果记录不存在的话就插入如何保证并发安全
导读 Hi,大家好!我是白日梦!本文是MySQL专题的第 27 篇. 下文还是白日梦以自导自演的方式,围绕"如何实现记录存在的话就更新,如果记录不存在的话就插入."展开本话题.看看 ...
- hihocoder 第一周 最长回文字串
题目1 : 最长回文子串 时间限制:1000ms 单点时限:1000ms 内存限制:64MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在编程 ...
- SPOJ 1811 Longest Common Substring (后缀自动机第一题,求两个串的最长公共子串)
题目大意: 给出两个长度小于等于25W的字符串,求它们的最长公共子串. 题目链接:http://www.spoj.com/problems/LCS/ 算法讨论: 二分+哈希, 后缀数组, 后缀自动机. ...
- 第一迭代目标——future weather
第一个迭代目标(主要数据) 引导界面.获取天气数据(api接口).天气分享 人员工作分配: 引导界面:周子静,界面的引导,耗时3天 获取天气数据:包舒婷.俞先浩,api接口,耗时5天 天气分享:郭磊蕾 ...
- 《新年Flag》2019年“新年Flag” - 新目标 学习计划
<新年Flag>2019年"新年Flag" - 新学期 新目标 学习计划 达叔终于等到你了~ 先做个自我介绍: [达叔小生:往后余生,唯独有你]小程序 -> 后端 ...
- NetModular 新年第一更以及升级指南(打造简单易用的.Net Core模块化快速开发框架~)
先给大家拜个晚年,祝大家身体健康,远离肺炎~ NetModular开源已有一年,在这一年收到了很多建议,框架也变得越来越完善.这次更新包括了从去年年尾到现在所做的更改,感觉更改的内容还是蛮多的,所以记 ...
- python装饰器(新年第一写)
祭奠碌碌无为的2018,想想其实也不算碌碌无为,至少我还搞懂了装饰器,写了一堆有用没用的玩意 原来觉得装饰器挺难的,直到2018年的最后几天,突然就明白了,难道这就是传说中的开天聪么 言归正传,之所以 ...
- Archlive新年第一棒: 基于2.6.37稳定内核的archlive20110107
先上图,再来说明吧... 下载地址: http://u.115.com/file/t2cd0ea120 先上个本机器运行teamviewer的效果图吧... 如假包换的 2.6.37, 担保是目前最 ...
随机推荐
- css+div基本知识;
1.居中: <div class="test"></div> css: .test{ margin: auto; //一行中居中: } 2.IE与其他浏览器 ...
- CodeForces1065F 树形dp
http://codeforces.com/problemset/problem/1065/F 你有一棵带有n个结点的树,根是结点1.有一个标记,最初在根结点处.你可以将标记移动到其他结点处.假设标记 ...
- busybox(一)浅析
目录 busybox(一)浅析 引入 读取inittab 创建执行脚本链表 执行脚本 小结 title: busybox(一)浅析 tag: arm date: 2018-11-13 23:02:33 ...
- 使用mysql存放Ambari元数据的配置案例
使用mysql存放Ambari元数据的配置案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.环境准备 详情请参考我之前的笔记:离线方式部署Ambari2.6.0.0 中关 ...
- linux对4T硬盘进行分区
使用parted工具: yum install parted parted /dev/sdb //选择硬盘 GNUParted 2.3Using /dev/sdbWelcome to GNU Part ...
- linux中文件多行合并为一行的例子
现网中经常遇到匹配到某一关键字下的所有行合并到同一行,再次匹配到相关关键字再和下面的合并,示例如下: # line1ab# line2cde# line3f想要变成: # line1 a b# lin ...
- 【C#】C#创建自定义Object对象
艹,老是忘!!! }; 记录一下,var obj = new { Name="lily",Age=12};
- MyBatis-DynamicSQL 动态SQL
MyBatis 的动态 SQL 使用 OGNL 表达式 http://commons.apache.org/proper/commons-ognl/language-guide.html 在 XML ...
- python 模块二(os,json,pickle)
#################################总结##################### os常用 os.makedirs('baby/安哥拉/特斯拉/黄晓明') os.mkd ...
- WebAPI性能优化之压缩解压
有时候为了提升WebAPI的性能,减少响应时间,我们会使用压缩和解压,而现在大多数客户端浏览器都提供了内置的解压支持.在WebAPI请求的资源越大时,使用压缩对性能提升的效果越明显,而当请求的资源很小 ...