近几年，Web前端技术发展是非常快的，尤其是HTML5，更是引起了浏览器商以及广大Web开发从业者的广泛关注。HTML5增加了大量的新特性，而Canvas则是其中最引人关注的。作为HTML5核心技术之一，Canvas应用非常广泛，可以用于绘制图形、绘制图表、动画开发以及游戏开发等。一经推出就备受关注，它到底有什么独特之处，又是凭借什么成为HTML5新宠的呢？让我们从定义开始一睹Canvas的风采。 在HTML5之前，为了达到页面绚丽多彩的效果，我们很多情况下都是借助“图片”来实现。不过使用图片这种方式，都是以“低性能”为代价的。由于图片体积大、下载速度慢等原因，因此为了应对日渐复杂的Web应用开发，W3C在HTML5标准中引入了Canvas这一门技术。 我们都知道，HTML5新增了一个Canvas元素。其实，Canvas又称为“画布”，是HTML5的核心技术之一。我们常说的Canvas技术，指的就是使用Canvas元素结合Javascript来绘制各种图形的技术。 既然Canvas是HTML5核心技术，那它都有哪些厉害之处呢？ 1．绘制图形Canvas可以用来绘制各种基本图形如矩形、曲线、圆等，也可以绘制各种复杂绚丽的图形，如图 1 所示。 图1 Canvas绘制图形（七巧板） 2．绘制图表很多公司业务的数据展示都离不开图表，使用Canvas可以用来绘制满足各种需求的图表，如图 2 所示。 图2 Canvas绘制图表 3．动画效果使用Canvas，我们也可以制作出各种华丽的动画效果，这也是Canvas为大家带来的一大乐趣，如图 3 所示。 图3 Canvas动画效果 4．游戏开发游戏开发在HTML5领域具有举足轻重的地位，现在我们也可以使用Canvas来开发各种游戏，如图 4 所示。这几年非常火的游戏如围住神经猫等，就是使用HTML5 Canvas来开发的。 图4 Canvas开发游戏 此外，Canvas技术是一门纯JavaScript操作的技术，因此大家需要具备JavaScript入门知识。对于JavaScript的学习，可以关注绿叶学习网（www.lvyestudy.com）中的开源教程。 HTML5有两个主要的2D图形技术：Canvas和SVG。事实上，Canvas和SVG是两门完全不同的技术。两者具有以下区别。 （1）Canvas是使用JavaScript动态生成的，SVG是使用XML静态描述的。 （2）Canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量。SVG是基于“矢量”的，不适用于像素处理和静态描述，图形放大不会影响质量。也就是说，使用Canvas绘制出来的是一个“位图”，而使用SVG绘制出来的是一个“矢量图”。如图 5 和图 6 所示。 图5 Canvas位图（放大会失真） 图6 SVG矢量图（放大不会失真） （3）每次发生修改，Canvas需要重绘，而SVG不需要重绘。 （4）Canvas与SVG的关系，简单来说，就像“美术与几何”的关系一样。 此外，并非Canvas就比SVG更有前途，也并非SVG就比Canvas更有前途，因为这两个是用于不同场合的。在实际开发中，我们应该根据开发需求去选择。 当然，这里只是简单介绍了一下Canvas与SVG的区别，如果想真正了解，我们还需要深入学习这两门技术。最后给大家一个小小的建议：很多人接触新技术的时候，喜欢在第一遍学习中就把每一个细节都弄清楚，事实上这是效率最低的学习方法。在第一遍学习中，如果有些东西实在没办法理解，那就直接跳过，等到学到后面或者看第二遍的时候，自然而然就懂了。 HTML5 Canvas，简单来说，就是一门使用JavaScript来操作Canvas元素的技术。使用Canvas元素来绘制图形，需要以下三步。 （1）获取canvas对象。 （2）获取上下文环境对象context。 （3）开始绘制图形。 举例： |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
注册
登录
