前端开发

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

4956

由于移动设备对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-视频课程