如何绘制HTML5中的Canvas基本线条
本篇文章为大家展示了如何绘制HTML5中的Canvas基本线条,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
成都创新互联于2013年创立,是专业互联网技术服务公司,拥有项目成都做网站、成都网站建设、成都外贸网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元寿县做网站,已为上家服务,为寿县各地企业和个人服务,联系电话:18982081108
怎么画线条?和现实中画画差不多:
1.移动画笔,使画笔移动至绘画的开始处
2.确定第一笔的停止点
3.规划好之后,选择画笔(包括画笔的粗细和颜色等)
4.确定绘制
因为Canvas是基于状态的绘制(很重要,后面会解释),所以前面几步都是在确定状态,最后一步才会具体绘制。
1.移动画笔(moveTo())
之前我们获得了画笔context,所以以此为例,给出改方法的使用实例——context.moveTo(100,100)。这句代码的意思是移动画笔至(100,100)这个点(单位是px)。记住,这里是以canvas画布的左上角为笛卡尔坐标系的原点,且y轴的正方向向下,x轴的正方向向右。
2.笔画停点(lineTo())
同理,context.lineTo(600,600)。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚,这里的moveTo()``lineTo()都只是状态而已,是规划,是我准备要画,还没有开始画,只是一个计划而已!
3.选择画笔
这里我们暂且只设置一下画笔的颜色和粗细。
context.lineWidth = 5,这句话的意思是设置画笔(线条)的粗细为10px。
context.strokeStyle = "#AA394C",这句话的意思是设置画笔(线条)的颜色为玫红色。
因为Canvas是基于状态的绘制,所以我们在选择画笔粗细和颜色的同时,其实也是选择了线条的粗细和颜色。
4.确定绘制
确定绘制只有两种方法,fill()和stroke(),有点绘画基础的应该知道,前者是指填充,后者是指描边。因为我们只是绘制线条,所以只要描边就可以了。调用代码context.stroke()即可。
画一个线条
不就一条线段吗!废话了这么多!那我们就开始画吧。
JavaScript Code复制内容到剪贴板
从线条开始
运行结果:
(一直有小伙伴问我页面右下角的熊是什么鬼?哦哦,之前忘解释了,那个是我的防伪水印!)
我还标注了一个页面解析图,供大家参考。
这里我将原本
小结:要设置画布的大小,只有这两种方法
1.在
2.在JS代码中设置canvas的属性.
怎么样,是不是非常的酷。接下来我们要加快脚步了,绘制一个多线条组成的图形。是不是感觉自己离艺术家又进了一步呢?别看这只是简简单单的一条线段,这一画只是我们的一小步,但却是人类的一大步!
绘制折线
上面我们已经成功绘制了一条线段。那么,如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢?
聪明的小伙伴肯定已经想到了,这还不简单,复用lineTo()就可以了。下面我就献丑随便画了一条优美的折线~
JavaScript Code复制内容到剪贴板
绘制折线
运行结果:
绘制多条折线
那同理,我们要绘制多条样式各不相同的折线怎么办呢?比如我们在这里画三条折线,分别是红色、蓝色、黑色。聪明的小伙伴肯定想到了,这还不简单,只需要平移一下再改下画笔颜色就行了。代码格式都一样的,复制就可以了。代码如下。
JavaScript Code复制内容到剪贴板
绘制折线