我们的目标

  • 首先是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的知识点的更多相关文章

  1. 0607pm克隆&引用类&加载类&面向对象串讲&函数重载

    克隆class Ren{ public $name; public $sex; function __construct($n,$s) { $this->name=$n; $this->s ...

  2. 视频+图文串讲:MySQL 行锁、间隙锁、Next-Key-Lock、以及实现记录存在的话就更新,如果记录不存在的话就插入如何保证并发安全

    导读 Hi,大家好!我是白日梦!本文是MySQL专题的第 27 篇. 下文还是白日梦以自导自演的方式,围绕"如何实现记录存在的话就更新,如果记录不存在的话就插入."展开本话题.看看 ...

  3. hihocoder 第一周 最长回文字串

    题目1 : 最长回文子串 时间限制:1000ms 单点时限:1000ms 内存限制:64MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在编程 ...

  4. SPOJ 1811 Longest Common Substring (后缀自动机第一题,求两个串的最长公共子串)

    题目大意: 给出两个长度小于等于25W的字符串,求它们的最长公共子串. 题目链接:http://www.spoj.com/problems/LCS/ 算法讨论: 二分+哈希, 后缀数组, 后缀自动机. ...

  5. 第一迭代目标——future weather

    第一个迭代目标(主要数据) 引导界面.获取天气数据(api接口).天气分享 人员工作分配: 引导界面:周子静,界面的引导,耗时3天 获取天气数据:包舒婷.俞先浩,api接口,耗时5天 天气分享:郭磊蕾 ...

  6. 《新年Flag》2019年“新年Flag” - 新目标 学习计划

    <新年Flag>2019年"新年Flag" - 新学期 新目标 学习计划 达叔终于等到你了~ 先做个自我介绍: [达叔小生:往后余生,唯独有你]小程序 -> 后端 ...

  7. NetModular 新年第一更以及升级指南(打造简单易用的.Net Core模块化快速开发框架~)

    先给大家拜个晚年,祝大家身体健康,远离肺炎~ NetModular开源已有一年,在这一年收到了很多建议,框架也变得越来越完善.这次更新包括了从去年年尾到现在所做的更改,感觉更改的内容还是蛮多的,所以记 ...

  8. python装饰器(新年第一写)

    祭奠碌碌无为的2018,想想其实也不算碌碌无为,至少我还搞懂了装饰器,写了一堆有用没用的玩意 原来觉得装饰器挺难的,直到2018年的最后几天,突然就明白了,难道这就是传说中的开天聪么 言归正传,之所以 ...

  9. Archlive新年第一棒: 基于2.6.37稳定内核的archlive20110107

    先上图,再来说明吧... 下载地址: http://u.115.com/file/t2cd0ea120 先上个本机器运行teamviewer的效果图吧... 如假包换的 2.6.37,  担保是目前最 ...

随机推荐

  1. css+div基本知识;

    1.居中: <div class="test"></div> css: .test{ margin: auto; //一行中居中: } 2.IE与其他浏览器 ...

  2. CodeForces1065F 树形dp

    http://codeforces.com/problemset/problem/1065/F 你有一棵带有n个结点的树,根是结点1.有一个标记,最初在根结点处.你可以将标记移动到其他结点处.假设标记 ...

  3. busybox(一)浅析

    目录 busybox(一)浅析 引入 读取inittab 创建执行脚本链表 执行脚本 小结 title: busybox(一)浅析 tag: arm date: 2018-11-13 23:02:33 ...

  4. 使用mysql存放Ambari元数据的配置案例

    使用mysql存放Ambari元数据的配置案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.环境准备   详情请参考我之前的笔记:离线方式部署Ambari2.6.0.0 中关 ...

  5. linux对4T硬盘进行分区

    使用parted工具: yum install parted parted /dev/sdb //选择硬盘 GNUParted 2.3Using /dev/sdbWelcome to GNU Part ...

  6. linux中文件多行合并为一行的例子

    现网中经常遇到匹配到某一关键字下的所有行合并到同一行,再次匹配到相关关键字再和下面的合并,示例如下: # line1ab# line2cde# line3f想要变成: # line1 a b# lin ...

  7. 【C#】C#创建自定义Object对象

    艹,老是忘!!! }; 记录一下,var obj = new { Name="lily",Age=12};

  8. MyBatis-DynamicSQL 动态SQL

    MyBatis 的动态 SQL 使用 OGNL 表达式 http://commons.apache.org/proper/commons-ognl/language-guide.html 在 XML ...

  9. python 模块二(os,json,pickle)

    #################################总结##################### os常用 os.makedirs('baby/安哥拉/特斯拉/黄晓明') os.mkd ...

  10. WebAPI性能优化之压缩解压

    有时候为了提升WebAPI的性能,减少响应时间,我们会使用压缩和解压,而现在大多数客户端浏览器都提供了内置的解压支持.在WebAPI请求的资源越大时,使用压缩对性能提升的效果越明显,而当请求的资源很小 ...