前端开发 ·

H5移动开发第五课:Canvas绘图功能和三维效果

由于移动设备对HTML5的较好支持,经常有活动用刮奖、绘制的小游戏和滑动模糊的效果在微信朋友圈疯狂的转发。这些都是利用html5的Canvas绘图功能和三维效果。

今天25学堂跟大家重点来认识下这2个h5移动开发的重点特性。

第一个H5功能特性:Canvas绘图功能

H5的canvas

HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。

不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

本手册提供完整的 getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。

详细的H5的canvas使用请参考《HTML 5 Canvas 参考手册

 

Canvas 是 H5 的画布元素,即一个 DOM 元素。通过脚本控制逻辑给画布上增加文字与图像,而浏览器只需要绘制一次形成一幅图。

使用canvas开发的优点和好处:

1、只用一个 Canvas DOM 元素,降低 DOM 数量与渲染的复杂度,可以将原来 CPU 密集型变成 GPU 操作。绝大多数针对 Canvas 是用硬件 GPU 加速渲染。

2、GPU 的 ALU(计算单元) 比 CPU 要多很多,而控制运算(逻辑)则可以用 JavaScript 在 CPU 里做,甚至还可以用 WebWorker 多线程处理 CPU 密集型的操作,从而达到充分利用硬件资源的能力。

3、Canvas 画布无论是 JavaScript & H5,还是 native 都有类似的 API。所以:本地调试可在浏览器里完成。

4、最差方案可以用 Canvas UI 跑在浏览器里。

5、更进一步,可以把浏览器 Canvas 接口的反射到用 native 画布上,以此提高性能。

 

下面让我们开始了解H5的canvas代码具体编写:

HTML部分只要声明下canvas的id即可。当然你也可以定义绘制的画布的长宽。

<canvas id="myCanvas"></canvas>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(10,10);   //定义绘画开始的位置
ctx.lineTo(150,50);  //画一条直线,结束点坐标是x=150,y=50
ctx.stroke();  //描边
</script>

H5的canvas的具体使用流程:先定义绘图的画布。其次,构建绘图环境对象。最后,开始绘制我们想要的元素和图形。

h5实战开发第一课

25学堂的小编为了让各位童鞋方便理解:

你可以将H5的绘图功能类比为Flash,但是唯一的决定性区别是,Flash做出来的动画无法在移动端的浏览器中浏览,因为Adobe早已在2012年就停止了对移动端flash的开发。毫无疑问,未来的移动网页游戏和动画会是H5的天下。

从技术实现的角度,H5配合JS(一种程序语言)可以做出任何二维动画,并且因为是网页元素,所有元素均可以监测到用户点击的数据,也就是说你可以知道用户在H5动画网页中的所有交互行为。但是,具体到实际应用,我们就要考虑周期、成本,和用户体验的问题,复杂的动画相应的制作周期和成本会提高,同时也有可能影响加载速度等用户体验相关的问题。

下面就是25学堂推荐给各位学习H5移动开发Canvas绘图功能资料:

基础必读的:《HTML 5 Canvas 参考手册

1、如何开发一个简单的HTML5 Canvas 小游戏

2、HTML5- Canvas入门详细教程

3、HTML5教程资源分享第一站

4、HTML5 Canvas实战之刮奖效果

如果你们还有更好的关于canvas的教程和资源可以分享给25学堂。

下面再来推荐慕课网的关于H5的canvas的视频教程:

H5-canvas-视频课程

炫丽的倒计时效果Canvas绘图与动画基础

 

第二个H5功能特性:三维效果

H5的华丽效果离不开一种叫CSS的技术,形象的说,如果把HTML5比作漫画的素描稿,CSS就是上色用的,相当于word界面上方的格式工具栏,如果没有CSS我们看到的H5网页就只能以“素颜”见人了。如果你熟悉互联网技术的命名规则你应该能知道CSS3就是CSS的升级版本。

在CSS3中有个非常酷的功能是三维渲染,也就说H5中能做出3D动画甚至3D游戏。目前我们看到的H5中CSS3 3D的应用较少,这个也许会是下一个营销类H5应用的热点,建议大家持续关注。

代表案例:程序员给女朋友用HTML5制作的3D相册

H5-3D效果

程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近。程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的。本相册使用了HTML5的画布技术,需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。

欣赏地址:http://www.webhek.com/misc/3d-album

 

参与评论

  • 游客

    源码贡献出来学习学习

    3年前 (2016-01-26)
    回复
    回复游客
  • 游客

    源码贡献出来学习学习

    3年前 (2016-01-26)
    回复
    回复游客