1、canvas是什么?
<canvas> 是 HTML5 新增的元素,可用于通过使用 JavaScript 中的脚本来绘制图形。例如,它可以用于绘制图形、制作照片、创建动画,甚至可以进行实时视频处理或渲染。
重点:
- canvas是一个html标签
- canvas是通过javascript来绘制图像的
2、canvas可以做什么?
canvas的应用场景非常广泛,目前canvas主要应用于一下几个领域。
(1)数据可视化
canvas在数据可视化中应用最多的就是绘制图表了,因为canvas是Javascript动态绘制的,用它不仅仅是绘制一张静态的图表,还可以够根据数据的变化动态修改图表,实时展现数据的变化
现在有很多的数据可视化的js库,比如百度开源的Echart大部分是基于canvas开发的
(2)H5小游戏
Canvas以其独特的特性,强大的绘图功能,可以轻松胜任游戏开发。我们在手机上、网页上随处可见的网页游戏,很大一部分是基于canvas开发的。
一个简单的html canvas开发的五子棋游戏
另外现在火热的各种小游戏,如微信小游戏、头条小游戏绝大部分也是基于canvas开发的。针对此也出现了很多H5游戏引擎,比如Egret(白鹭)引擎、Layabox引擎。用它们来开发小游戏会更加的方便。更多的H5小游戏,可以在微信或今日头条里搜索查看。
(3)特效背景
我们经常看到有一些网站的背景有一些会动的线条,还会跟随鼠标移动,看起非常的酷炫,而且还很好玩。比如我们来欣赏几个:
这是一个登陆界面的酷炫背景,随着鼠标的移动会有点线图形跟随出现,结合背景图,有一种星空的深邃感。
在很多网站见过这个背景效果,鼠标移动时,就有一些会动的点线图案随着鼠标移动,有时浏览网站会情不自禁地玩上一会儿。
还有白色的
这是一个漂亮的心形效果,应该知道能用它来做什么。
比较酷炫的鼠标滑过效果,在欢迎页面或活动页面比较实用
以上只是随便分享了几个,网上可以搜到更多、更酷炫的效果,感兴趣的可以自行搜索。
(5)其它应用
canvas的应用还有很多,它可以是一个大型的应用,也可以是一个非常小的效果,比如一些小动画、活动页面的一个小游戏等,这里无法一一列举。总之 canvas的应用场景是非常广泛的。还有更多的场景需要我们去探索。
3 如何使用canvas?
看了这么多的效果,接下来我们就要来学习如何使用canvas了,不多它多复杂,我们都通过一个简单的例子来入门。请看如下代码:
说明:
canvas是一个html元素,一般我们就在html中使用它,步骤如下
(1)在html中建一个<canvas>元素;
(2)在js代码中获取canvas对象;
(3)用获取到的canvas对象再获取绘画上下文对象context;
(4)真正绘画时,我们使用的是context进行绘制
本文主要了解canvas及其应用场景,最后简单的介绍了canvas的使用,后续将有更多的canvas系列教程,敬请关注。
