资讯专栏INFORMATION COLUMN

Canvas学习笔记(一)

codecraft / 1572人阅读

摘要:学习资源来自慕课网炫丽的倒计时效果绘图与动画基础,非常感谢老师的课程分享创建标签的标签定义了一块画布,我们所有的绘图都是基于这一块画布。正是因为是基于状态的,所以不同的状态应该有明确的起始标志。

喜欢前端,学习前端的最原始的动机,就是因为它可以制作非常酷炫的效果。然而现在上班所用的技巧,多是在业务逻辑那一块,并非是我最初想要去做的东西。所以在下班以后,打算重新拾起自己的兴趣,去学习真正的“酷炫”的东西。
Canvas,就是能够让我实现目标的利器之一。希望通过这一个笔记,能够督促我高效完成学习,并且把学习的感悟分享出来。

学习资源来自慕课网/炫丽的倒计时效果Canvas绘图与动画基础,非常感谢@liuyubobobo 老师的课程分享!

创建标签

html5的标签定义了一块“画布”,我们所有的绘图都是基于这一块画布。所以在页面上我们先声明一个带id的canvas标签


    你的浏览器版本太tm旧了

为什么直接在标签里面定义widthheight呢,是因为

这里面的widthheight是canvas自己的属性,并非css3的属性。如果只用css3定义宽高的话只是限制了这块画布的大小,对内容的分辨率等显示问题并无约束(这句话有待考证)。而直接在标签里定义这两个属性的好处是能够一并地解决画布大小与实际显示的问题。

标签中间的文字内容是当浏览器不支持canvas自动出现的提示性话语,在浏览器支持canvas时这句话会被省略。

在创建好页面标签以后,开始进入实际的canvas绘制。它是完全通过js控制的,所以我们有关画图的一切都是在js中进行

创建绘图上下文

在js中,我们这样定义:

var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");

首先获取canvas对象,然后执行它的.getContext("2d")方法,建立一个绘图上下文环境cxt。以后所有在这一块画布进行的绘制,都是调用这个cxt不同的方法来完成。环境搭建好了,就可以进行真正的操作啦!

绘制图形

教程上说得很明白,在这里就不继续赘述了,主要总结出不同方法的作用,效果,及其注意事项。

//把笔尖放在画布100, 100的位置
cxt.moveTo(100, 100)
//从100,100画到700,700
cxt.lineTo(500,500)
//继续画完它
cxt.lineTo(500,100)
cxt.lineTo(100,100)
//设置线条宽度
cxt.lineWidth = 5
//设置线条样式(颜色)
cxt.strokeStyle = "pink"
//设置填充色
cxt.fillStyle = "lightblue"
cxt.fill()
//告诉canvas我画完了,执行stroke()方法
cxt.stroke()

老师在教程里反复强调了一点,就是canvas是基于“状态”的绘图,也就是当我怎样定义moveTo()lineTo()之类的方法的时候,我定义的是一种“我想怎么怎么去画”的状态,是“未下笔”的,而当我已经想好了,定义好了这个状态以后,才执行“把想法画出来”的方法,即执行.fill().stroke()等方法,告诉canvas“我要画了啊!”,然后把内容画出来。

正是因为canvas是基于状态的,所以不同的状态应该有明确的起始标志。如果我们想画不同颜色的一个三角型和一条直线,我们可能会这么写

//把笔尖放在画布100, 100的位置
cxt.moveTo(100, 100)
//从100,100画到700,700
cxt.lineTo(500,500)
//继续画完这个三角形
cxt.lineTo(500,100)
cxt.lineTo(100,100)
//设置三角形线条颜色为粉红色(我特喜欢粉)
cxt.strokeStyle = "pink"
//告诉canvas我画完了,执行stroke()方法
cxt.stroke()


//画一条新的线
cxt.moveTo(50, 100)
cxt.lineTo(450,500)
//设置这条线的颜色为浅蓝色
cxt.strokeStyle = "lightblue"
//告诉canvas我画完了,执行stroke()方法
cxt.stroke()

看看效果如何:

因为canvas基于状态,然而这俩的状态并没有被区分(canvas没那么智能),所以后面的cxt.strokeStyle = "lightblue"会把前面的给覆盖掉,也就是它只有一个线条颜色的状态。那么如何给它定义不同的状态呢?有两个方法,请看代码

cxt.beginPath()
//把笔尖放在画布100, 100的位置
cxt.moveTo(100, 100)
//从100,100画到700,700
cxt.lineTo(500,500)
//继续画完这个三角形
cxt.lineTo(500,100)
cxt.lineTo(100,100)
//设置三角形线条颜色为粉红色(我特喜欢粉)
cxt.closePath()
cxt.strokeStyle = "pink"
//告诉canvas我画完了,执行stroke()方法
cxt.stroke()

cxt.beginPath()
//画一条新的线
cxt.moveTo(50, 100)
cxt.lineTo(450,500)
cxt.closePath()
//设置这条线的颜色为浅蓝色
cxt.strokeStyle = "lightblue"
//告诉canvas我画完了,执行stroke()方法
cxt.stroke()

其中,beginPath()告诉canvas我想会从这里开始画一段路径closePath()声明路径的结束。虽然这两个方法在包裹着.stroke()方法时也生效,但是为了语义化,path指的是路径,所以我们把这两个方法仅用于包裹路径即可。看看效果:

未完待续……

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78579.html

相关文章

  • Canvas 学习笔记

    摘要:一直没有系统的去学习一下,都是在用到的时候一边一边使用,最近工作上的事情告一段落,就决定跟着学习一下。在学习之前,首先了解一下的背景知识。元素是规范的一部分也包含于中。标签同时支持属性和规则中的。 一直没有系统的去学习一下canvas,都是在用到的时候一边google一边使用,最近工作上的事情告一段落,就决定跟着MDN 学习一下Canvas。 在学习之前,首先了解一下canvas的背景...

    Yuqi 评论0 收藏0
  • Canvas学习笔记

    摘要:学习资源来自慕课网炫丽的倒计时效果绘图与动画基础,非常感谢老师的课程分享创建标签的标签定义了一块画布,我们所有的绘图都是基于这一块画布。正是因为是基于状态的,所以不同的状态应该有明确的起始标志。 喜欢前端,学习前端的最原始的动机,就是因为它可以制作非常酷炫的效果。然而现在上班所用的技巧,多是在业务逻辑那一块,并非是我最初想要去做的东西。所以在下班以后,打算重新拾起自己的兴趣,去学习真正...

    ispring 评论0 收藏0
  • Canvas 学习笔记(二)——基础图形的绘制

    摘要:上一篇简单记录了一些的基础知识,这一篇迟到的笔记来简单记录一下绘制基本图形。说到基本图形,无非是矩形圆形线段曲线。很多所谓的图案基本都是这几种基本图形组合而成。通过一组又一组的两点绘制出各种复杂的图形出来。 距离上一篇已经过去好长段日子了,本来这篇早就该写了,天不遂人愿:笔记本的键盘坏掉了,然后送修了耽误了好几天。 上一篇简单记录了一些Canvas 的基础知识,这一篇迟到的笔记来简单记...

    ad6623 评论0 收藏0
  • canvas学习笔记-2d画布基础

    摘要:若要在上绘图,首先得获取渲染上下文。此处指的,不谈示例的属性通过设置上下文的属性,可以指定绘图的样式。 一. Canvas是啥 < canvas > 是一个可以使用脚本(通常是js)来绘图的HTML元素 < canvas > 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard和 Safari 如今,所有主流的浏览器都支持它(IE9+,更低版本需引入Expl...

    habren 评论0 收藏0
  • Canvas学习笔记

    摘要:设置绘制字符串的垂直对齐方式,该属性支持等属性值。调用的方法关闭子路径。与前一个方法相比,只是定义弧的方式不同。把的当前路径从当前结束点连接到对应的点。向添加一段二次曲线。 1.使用canvas元素 在HTML页面上定义元素与定义其他普通元素并无任何不同,它除了可以指定id、style、class、hidden等通用属性之外,还可以指定如下两个属性: height:该属性设置该画布组...

    ad6623 评论0 收藏0

发表评论

0条评论

codecraft

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<