引言:Html5的发展和推广速度之快是有目共睹的,越来越多的行业巨头正不断向HTML5示好。除苹果、微软、黑莓之外,谷歌的Youtube已部分使用HTML5;Chrome浏览器宣布全面支持HTML5;Facebook则不遗余力地为HTML5进行着病毒式传播。一切正如正益无线总裁王国春所说:“HTML5代表了移动互联网发展的趋势,总有一天它将成为主流技术。”,因为html5作为一个前端的编程语言,前景是好的!Canvas元素是H5新增的开发跨平台动画和游戏的标准解决方案,能够实现对图像和视频进行像素级操作,为Web图形和视频处理打开了广阔的空间。在这篇博客中,我将与大家共同来了解一下Canvas元素。
1、 使用Canvas元素的案例:
粒子特效:
APP动态特效
2、 canvas的使用
1) canvas其实没有那么玄乎,它不外乎是一个H5的标签,跟其它HTML标签如出一辙:
2) canvas本身没有任何的绘图能力,所有的绘图工作都是通过js来实现的。通常我们在js通过getElementById来获取要操作的canvas(这意味着咱得给canvas设个id):
3) 注意好在一开始的时候就给canvas设置好其宽高(若不设定宽高,浏览器会默认设置canvas大小为宽300、高100像素),而且不能使用css来设置(会被拉伸),建议直接写于canvas标签内部
4) getContext(“2d”),是canvas的绘图对象/方法,要让canvas执行绘图工作必须先获取canvas的.getContext()对象来执行。getContext()只接受一个参数,该参数用于获取canvas的绘图环境,例如.getContext("2d")表示该canvas的绘图环境为2D平面(可以绘制文本、直线、弧线、矩形、圆形等)。当前H5只支持2D环境,在不久的将来会开放3D绘图功能。(故咱可将“getContext”翻译为“获取绘图环境”)
5) 理论不多说,我们先来个小例子,从简单的绘制直线开始:
代码:
效果图:
6) 在这里我们使用了3个getContext("2d")对象的绘图方法:
.moveTo(x坐标 , y坐标) 可以理解为定位画笔在画布上的位置(注意所有绘图方法所定义的坐标是相对canvas而言的而不是浏览器窗口,对canvas来说,左上角的点的坐标是(0,0))
.lineTo(x坐标 , y坐标) 顾名思义,就是画一条直线到某个点,很好理解。需要知道的是此方法仅仅做路径运动,而不存在任何视觉上的绘图效果(上色、描边)
.stroke() 描边方法,有玩过AfterEffect的朋友会很清楚,不给运动路径加stroke特效的画是不存在描边效果的,canvas也一样,想要运动路径轨迹能有视觉效果,需要使用相应的上色/描边方法
总结:Canvas说容易也容易说复杂也复杂,今天只是带大家了解一下Canvas与Canvas绘制直线的方法。当然,今天所分享Canvas的功能也只是窥见一斑,还需要大家去研究思考总结。后也祝福大家学无止境,勇攀高峰!!
热点新闻
前端开发技术库