栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript > canvas教程

Canvas 从线段开始 · Canvas动画教程

canvas教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Cp 从线段开始

怎么画线段?

上一讲我们已经得到了咱们的画布和画笔,在发挥艺术家之魂前,还是要像小孩牙牙学语一样,我们也得从画一条线段开始。因为画线段是最简单的,最基础的。但是别小看了它。下面是我从度娘那里找到的一个由线条组成的图像。


线条组成的图像

是不是很有魔性?

言归正传。怎么画线条?和现实中画画差不多:

    移动画笔,使画笔移动至绘画的开始处
    确定第一笔的停止点
    规划好之后,选择画笔(包括画笔的粗细和颜色等)
    确定绘制

因为Canvas是基于状态的绘制(很重要,后面会解释),所以前面几步都是在确定状态,最后一步才会具体绘制。

移动画笔(moveTo())

之前我们获得了画笔context,所以以此为例,给出改方法的使用实例——context.moveTo(100,100)。这句代码的意思是移动画笔至(100,100)这个点(单位是px)。记住,这里是以canvas画布的左上角为笛卡尔坐标系的原点,且y轴的正方向向下,x轴的正方向向右。

笔画停点(lineTo())

同理,context.lineTo(600,600)。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚,这里的moveTo()``lineTo()都只是状态而已,是规划,是我准备要画,还没有开始画,只是一个计划而已!

选择画笔

这里我们暂且只设置一下画笔的颜色和粗细。

context.lineWidth = 5,这句话的意思是设置画笔(线条)的粗细为10px。

context.strokeStyle = "#AA394C",这句话的意思是设置画笔(线条)的颜色为玫红色。

因为Canvas是基于状态的绘制,所以我们在选择画笔粗细和颜色的同时,其实也是选择了线条的粗细和颜色。

确定绘制

确定绘制只有两种方法,fill()和stroke(),有点绘画基础的应该知道,前者是指填充,后者是指描边。因为我们只是绘制线条,所以只要描边就可以了。调用代码context.stroke()即可。

画一个线条

不就一条线段吗!废话了这么多!那我们就开始画吧。




    
    从线条开始


你的浏览器居然不支持Canvas?!赶快换一个吧!!

演示 3-1

运行结果:


第一个线条

(一直有小伙伴问我页面右下角的熊是什么鬼?哦哦,之前忘解释了,那个是我的防伪水印!)

我还标注了一个页面解析图,供大家参考。


标注图

这里我将原本标签中的width和height去掉了,但在Javascript代码中设置了canvas对象的width和height的属性。

小结:要设置画布的大小,只有这两种方法

    标签中设置;

    在JS代码中设置canvas的属性

怎么样,是不是非常的酷。接下来我们要加快脚步了,绘制一个多线条组成的图形。是不是感觉自己离艺术家又进了一步呢?别看这只是简简单单的一条线段,这一画只是我们的一小步,但却是人类的一大步!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/10638.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号