html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
|
副问题[/!--empirenews.page--]
我们画画的时辰，落笔点是不牢靠的，随时城市变。canvas固然不是通过手来抉择落笔点，但也有一个要领,就是moveTo。moveTo的浸染相等于把笔尖提离画布，然后移动到指定的点（即坐标）。 复制代码 代码如下: 此进程中不会画出任何图形，相等于你提着笔在画布上晃来晃去。 但晃来晃去是没用的，我们必需开始画。先画最简朴的：直线 画直线的要领即lineTo，他的参数和moveTo一样的，都是一个点。 ctx.lineTo(x,y)虽然，你画线的时辰，落笔点也随着移动了，以是lineTo之后落笔点就酿成了他的方针点了。 复制代码 代码如下: 此时你革新网页，会发明画布上没有预想中的线，什么也没有。由于我们还少了一个步调.lineTo着实是画的一条“路径”，自己是不行见的。假如要让他表现出来，我们必需对他举办“画”的操纵。 用过PS的同窗，必定能知道图形的两种模式，一种是添补，另一种是描边。此刻我们已经画了一条线，相等于PS中勾了一条路径，此时给路径描一下边，就能表现出图形了。 canvas描边的要领是stroke().此刻让我们把代码补全： 复制代码 代码如下: ctx.stroke();此时革新，就能看到一条线了。虽然，你也可以持续绘制出几百条路径，再执行描边举措，即可一下画出几百条线。此刻我们来用4条线画一个矩形： 复制代码 代码如下: 这里我们就是先绘出所有路径，再一次性描边。 ——–作者的诉苦：Canvas画图有个欠好的处所就是：根基靠猜，很不直观。 严峻提醒：canvas的画图进程（即添补与描边）长短常耗损资源的，假如想节减体系资源进步服从，最好是绘制好全部路径，再一次性添补或描边图形。 由上面的图形我们可以看出，默认的线条粗细是1px，而线条颜色是玄色。虽然我们可以配置他们,但稀疏的是配置线条宽度是lineWidth，而配置线条样式的却叫strokeStyle，为什么不是lineStyle呢？我也不知道。： 复制代码 代码如下: 上面的代码把线条宽度配置成了10px，线条颜色酿成了半透明的赤色。 如图1，革新一下，仿佛有点差池呢！怎么左上角缺了一小块似得？这不是错觉。缘故起因嘛要从canvas的线条绘制方法提及。 题目：假如我画的矩形路径是宽高都是100，此时我的边线宽度是10px，那么这个描了边的矩形整体宽高是几多？是100+10*2=120吗？ 假如边线是完全描在路径外侧的话，那么就是120。但Canvas不是。Canvas中的线条都有一条“中线”，这条中线位于line的绝对中间，线条的笔画以中线向两侧扩展。好比你的线条宽度是1，那么中线就在0.5的位置；宽度是5，那么中线就是在2.5。canvas的图形在描边的时辰，都是路径与line的中线贴合，然后描边。如图2： 以是，描边的时辰线的一半在外侧，一半在内侧，即上面的矩形的整体宽度是100+(10/2)*2，便是110. 也正是由于这个缘故起因，左上角呈现缺角就理所虽然了。由于这里没人画。 但为什么别的的角没有呈现缺口呢？看你的图不是4个角都有缺口吗？ 那是由于，我画线的进程中没有把画笔“提起来”，画笔是持续的，即没有moveTo过。不信我们此刻来moveTo一下： 复制代码 代码如下: 我们再画第二条线之前moveTo了一下，并且moveTo连坐标都没变，照旧谁人点，但革新后图形酿成了这个样子[图3]： 大白了？由于我们把笔提起来了。 此刻我们删掉moveTo，不要纠结他了，我们来思索一下怎样把左上角谁人缺角给补上？ 起首问个题目，我们的路径闭合了吗？这不是空话么，我们不是已经把路径绕回原点了么？虽然算是闭合了！ 错！这样只是让路径最后一个点和出发点重合了罢了，路径自己却没有闭合！ Canvas怎么闭合路径？用closePath(). 复制代码 代码如下: 此时革新，就是一个美满的正方形了。图4： 无论我们把线条改到多粗————越粗越有人喜好是吧？————这个四方形的四个角都是端正的直角，不会呈现油滑的环境。油滑的角是什么环境？请看PS中的四方形描边，图5： （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
