初识Canvas开启酷炫的编程之旅

是 HTML5 新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。例如，它可以用于绘制图形、制作照片、创建动画，甚至可以进行实时视频处理或渲染。

重点：

canvas的应用场景非常广泛，目前canvas主要应用于一下几个领域。

（1）数据可视化

canvas在数据可视化中应用最多的就是绘制图表了，因为canvas是Javascript动态绘制的，用它不仅仅是绘制一张静态的图表，还可以够根据数据的变化动态修改图表，实时展现数据的变化

现在有很多的数据可视化的js库，比如百度开源的Echart大部分是基于canvas开发的

（2）H5小游戏

Canvas以其独特的特性，强大的绘图功能，可以轻松胜任游戏开发。我们在手机上、网页上随处可见的网页游戏，很大一部分是基于canvas开发的。

一个简单的html canvas开发的五子棋游戏

另外现在火热的各种小游戏，如微信小游戏、头条小游戏绝大部分也是基于canvas开发的。针对此也出现了很多H5游戏引擎，比如Egret（白鹭）引擎、Layabox引擎。用它们来开发小游戏会更加的方便。更多的H5小游戏，可以在微信或今日头条里搜索查看。

（3）特效背景

我们经常看到有一些网站的背景有一些会动的线条，还会跟随鼠标移动，看起非常的酷炫，而且还很好玩。比如我们来欣赏几个：

这是一个登陆界面的酷炫背景，随着鼠标的移动会有点线图形跟随出现，结合背景图，有一种星空的深邃感。

在很多网站见过这个背景效果，鼠标移动时，就有一些会动的点线图案随着鼠标移动，有时浏览网站会情不自禁地玩上一会儿。

还有白色的

这是一个漂亮的心形效果，应该知道能用它来做什么。

比较酷炫的鼠标滑过效果，在欢迎页面或活动页面比较实用

以上只是随便分享了几个，网上可以搜到更多、更酷炫的效果，感兴趣的可以自行搜索。

（5）其它应用

canvas的应用还有很多，它可以是一个大型的应用，也可以是一个非常小的效果，比如一些小动画、活动页面的一个小游戏等，这里无法一一列举。总之 canvas的应用场景是非常广泛的。还有更多的场景需要我们去探索。

看了这么多的效果，接下来我们就要来学习如何使用canvas了，不多它多复杂，我们都通过一个简单的例子来入门。请看如下代码：

说明：

canvas是一个html元素，一般我们就在html中使用它，步骤如下

（1）在html中建一个元素；

（2）在js代码中获取canvas对象；

（3）用获取到的canvas对象再获取绘画上下文对象context;

（4）真正绘画时，我们使用的是context进行绘制

本文主要了解canvas及其应用场景，最后简单的介绍了canvas的使用，后续将有更多的canvas系列教程，敬请关注。

本站声明：以上部分图文视频来自网络，如涉及侵权请联系删除