认识canvas

canvas是什么

在HTML5之前,为了达到页面绚丽多彩的效果,我们很多情况下都是借助“图片”来实现。不过使用图片这种方式,都是以“低性能”为代价的。由于图片体积大、下载速度慢等原因,因此为了应对日渐复杂的Web应用开发,W3C在HTML5标准中引入了Canvas这一门技术。

我们都知道,HTML5新增了一个Canvas元素。其实,Canvas又称为“画布”,是HTML5的核心技术之一。我们常说的Canvas技术,指的就是使用Canvas元素结合Javascript来绘制各种图形的技术。

绘制图形

Canvas可以用来绘制各种基本图形如矩形、曲线、圆等,也可以绘制各种复杂绚丽的图形。

绘制图表

很多公司业务的数据展示都离不开图表,使用Canvas可以用来绘制满足各种需求的图表

动画效果

使用Canvas,我们也可以制作出各种华丽的动画效果,这也是Canvas为大家带来的一大乐趣。

游戏开发

游戏开发在HTML5领域具有举足轻重的地位,现在我们也可以使用Canvas来开发各种游戏,如图1-4所示。这几年非常火的游戏如围住神经猫等,就是使用HTML5 Canvas来开发的。

Canvas与SVG

HTML5有两个主要的2D图形技术:Canvas和SVG。事实上,Canvas和SVG是两门完全不同的技术。两者具有以下区别。

  • 1)Canvas是使用JavaScript动态生成的,SVG是使用XML静态描述的。
  • 2)Canvas是基于“位图”的,适用于像素处理和动态渲染,图形放大会影响质量。SVG是基于“矢量”的,不适用于像素处理和静态描述,图形放大不会影响质量。也就是说,使用Canvas绘制出来的是一个“位图”,而使用SVG绘制出来的是一个“矢量图”。如图所示。
  • 3)每次发生修改,Canvas需要重绘,而SVG不需要重绘。
  • 4)Canvas与SVG的关系,简单来说,就像“美术与几何”的关系一样。
    此外,并非Canvas就比SVG更有前途,也并非SVG就比Canvas更有前途,因为这两个是用于不同场合的。在实际开发中,我们应该根据开发需求去选择。
    当然,这里只是简单介绍了一下Canvas与SVG的区别,如果想真正了解,我们还需要深入学习这两门技术。最后给大家一个小小的建议:很多人接触新技术的时候,喜欢在第一遍学习中就把每一个细节都弄清楚,事实上这是效率最低的学习方法。在第一遍学习中,如果有些东西实在没办法理解,那就直接跳过,等到学到后面或者看第二遍的时候,自然而然就懂了。