写在最上边: 我知道没有图片, 没有代码看起来让人蛋疼菊紧. 但……… 提供了网址, 虽有点不方便. 但好歹有地方可以找.. iiiOrz

totally参考….
《MDN-Drawing shapes》
《(中文版)MDN-Drawing shapes 绘制图形》

正如字面意思 – “绘制图形”. 上一篇《[html5 canvas] 实现转换图片为灰度模式》是由于项目的需要, 看了下相关的. 既然都相关了. 索性相关的彻底点, 加之今天公司的preview server不好用.. 就看了一晚上的教程. 全部来自上边那个网址(亲自实现了下其中提到的demo).

代码方面, 直接按照官方的来吧. 本地测试用的, 跟官方的没有两样(注意: 不是纯粹的复制粘贴. 要出于这个目的, 当时就没啥必要接着往下看了, 读者朋友如果处于这个目的, 也没啥必要接着往下看我这篇了..)

因为当时有点”彪”, 抱着个英文版的嗷嗷啃, 进度比较缓慢, 接近下班的时候, 猛然惊醒, “卧槽! 有中文版.” 囧rz…

网格 The grid

这部分是个大略的介绍, 可以把canvas本身理解为一个网格系统, 其默认宽高为300pixel x 150pixel. 如果看做一个直角坐标系, x轴向右正方向, y轴向下正方向. 内部在绘图过程中, 都是通过坐标来定位的.

绘制图形 Drawing shapes

内容不多, 可以自己慢慢看. 英文吃不消的, 贫僧已经体贴的提供了中文链接(hiahia).
总结下常用的方法

1. fillRect(x, y, width, height)
   绘制矩形, 4个参数, x,y为矩形起点坐标(左上角), width, height为举行大小, 该方法将绘制出一个填充的矩形
2. strokeRect(x, y, width, height)
   参数以及相关信息, 跟fillRect一致. 不同之处为, 该方法绘制的图形非填充图形, 只有轮廓.
3. clearRect(x, y, width, height)
   可以才出来, 就是从”画布”上, 干掉相应区域的内容. 参数同上

绘制路径 Drawing paths

这部分内容非常多, 涉及到各种线.
moveTo, 各中线条, 弧线, 还有后边那坨一开始让我发指的”贝塞尔曲线, 二次方曲线”…
总之, 在复杂的东西, 也是基本方法组合而成. 在这部描述了, 想了解的去官方看看, 难度不大, 就是需要考虑各种坐标, 数学要靠谱(我的数学不靠谱, 脑袋瓜子快炸了.)

1. 绘制圆出”bug”…
arc画圆语法很简单arc(x,y,redius,startRadian,endRadian,true/false), xy为坐标原点. true/false表示挥之方向, 分别为逆时针/顺时针.
当定义坐标原点为任意两个值, 使用moveTo将”画笔”移动到该点, 尝试用stroke()绘制一个完整的圆的时候, 发现多绘出了一条半径. 问题就出在moveTo上. 正常当坐标原点确认后, arc的绘制开始位置, 是在最终圆的3点钟位置., moveTo会导致画笔先绘制到moveTo的坐标, 然后折回来, 从3点钟方向绘制圆. 解决办法就是不用moveTo去预先定位, 直接指定圆心坐标即可.

2. “贝塞尔曲线, 二次方曲线”疑惑
先看下两个方法的参数表quadraticCurveTo(cp1x, cp1y, x, y), bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y), xy均表示结束点的坐标, cp系列的点都为控制点, 可以从之前提供的网址看到演示图. 但是为毛初始点. 开始纠结了很久, 看文档说明, 着实没有错误. 看demo也是正常显示. 原因在于, demo中是使用moveTo先定位到一个点, 其实这个点就是起始点, 如此说来, 所有疑惑消失了…

用lineTo等先绘制一条线也是一样的效果, 总之就是有个起始位置即可.

3. 依旧是绘制圆
用stroke方法, 可以比较直观的反应圆的绘制方向, 留意到一点, 我想绘制1/4个圆, 右下方向. 这个时候我的代码如下
.arc(100,100,20,0,Math.PI*0.5,false);
可以绘制成功, 么有问题. 需求变更为“绘制1/4各院, 右上方向”.代码如下
.arc(100,100,20,0,Math.PI*0.5,true);
按照false表示顺时针, true表示逆时针, 绘制起点在3点位置, 这样右上方的1/4圆应该是这么写没错, 但结果显示为顺时针画过3/4个圆..(现在还没想明白是不是对第3, 第4个弧度参数的理解有误). 如果对所有顺时针方向绘制的圆, 其弧度参数改为负值, 就可以按照”我的理解”去绘制了. 不是太明白为毛是这样.

4. 弧度, 度数转换方法
Math*PI*Radian = Math.PI/180*Degree

代码及效果如下, 不包含贝赛尔曲线类的.