html能干什么？你可能会说：不就是网页标签语言吗，有什么大不了的。NO！提到html，我们就不得不谈谈时下很火的，充满应用前景，颠覆一切，令人激动不已的新标准——html5，这才是html的未来。
其实html5早在六年前就拉开了它的历史序幕，到目前为止关于html5规范的制定还没有成熟（其实html4都没有完全成熟），但关键是现在浏览器厂商已经着手支持html5中的很多优秀的新功能了，并且支持的功能也会越来越完善，只要你愿意，你现在就可以使用html5来开发web应用，然后你就知道，html5对用户带来的体验有多么棒！
html5之所以是颠覆性的，是因为它包含了很多以前没有的功能，比如：canvas，geolocation，audio和video，websocket API及协议，拖放，离线web应用，xmlhttprequest level 2等等，这里只列出了很小的一部分。
好的，现在就让我们来见识一下html5的魔力，我们用一个实例引入，先来看看最终的效果：
注意这可不是flash，这完全是用代码实现的，那么是如何做到的呢？
//下面是实现它的步骤：
//首先创建一个canvas
1 <canvas id="trails" style="border: 1px solid;" width="400" height="600"> </canvas>
//判断浏览器是否支持html5
1 if (!document.createElement('canvas').getContext) { 2 var msg = document.createElement("div"); 3 msg.id = "errorMsg"; 4 msg.innerHTML = "Your browser does not support html5<br/>please use Chrome/IE9/Firefox/opera-----mike.j"; 5 document.body.appendChild(msg); 6 }
//加载两张图片，第一张为小路的背景图，第二张为雨天纹理效果的透明图
1 var canvas = document.getElementById("trails"); 2 var gravel = new Image(); 3 gravel.src = "gravel.jpg"; 4 gravel.onload = function () { 5 drawTrails(); //图片加载完毕后，调用drawTrails函数，开始作画。 6 } 7 8 var rain = new Image(); 9 rain.src = "rain.png"; 10 rain.onload = function () { 11 window.requestAnimFrame(loopAnimation, canvas); 12 }
//createCanopyPath函数的作用是构建树的路径
1 function createCanopyPath(context) { 2 context.beginPath(); 3 context.moveTo(-25, -50); 4 context.lineTo(-10, -80); 5 context.lineTo(-20, -80); 6 context.lineTo(-5, -110); 7 context.lineTo(-15, -110); 8 9 context.lineTo(0, -140); 10 11 context.lineTo(15, -110); 12 context.lineTo(5, -110); 13 context.lineTo(20, -80); 14 context.lineTo(10, -80); 15 context.lineTo(25, -50); 16 context.closePath(); 17 }
//drawTree函数做出树冠和树的阴影，下雨天也有阴影。。。囧！
1 function drawTree(context) { 2 context.save(); 3 context.transform(1, 0, 4 -0.5, 1, 5 0, 0); 6 context.scale(1, 0.6); 7 context.fillStyle = 'rgba(0, 0, 0, 0.2)'; 8 context.fillRect(-5, -50, 10, 50); 9 createCanopyPath(context); //上面构建好阴影后，调用createCanopyPath画出阴影 10 context.fill(); 11 context.restore(); //画完后，恢复之前的绘图状态 12 13 var trunkGradient = context.createLinearGradient(-5, -50, 5, -50); //创建树干的左右渐变色 14 trunkGradient.addColorStop(0, '#663300'); 15 trunkGradient.addColorStop(0.4, '#996600'); 16 trunkGradient.addColorStop(1, '#552200'); 17 context.fillStyle = trunkGradient; 18 context.fillRect(-5, -50, 10, 50); 19 20 var canopyShadow = context.createLinearGradient(0, -50, 0, 0); //创建树干的上下渐变色 21 canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)'); 22 canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)'); 23 context.fillStyle = canopyShadow; 24 context.fillRect(-5, -50, 10, 50); 25 26 createCanopyPath(context); //这里开始画树冠 27 28 context.lineWidth = 4; 29 context.lineJoin = 'round'; 30 context.strokeStyle = '#663300'; 31 context.stroke(); 32 33 context.fillStyle = '#339900'; 34 context.fill(); 35 }
//终于到重点了，drawTrails函数，开始绘制
1 function drawTrails() { 2 var context = canvas.getContext('2d'); 3 context.save(); 4 context.clearRect(0, 0, 400, 600); 5 6 context.translate(130, 250); //平移到第一个位置 7 drawTree(context); //画第一颗树 8 context.restore(); 9 10 context.save(); 11 context.translate(260, 500); //平移到第二个位置 12 13 context.scale(2, 2); //宽和高都放大两倍 14 drawTree(context); //画第二颗树 15 context.restore(); 16 //这里开始画小路 17 context.save(); 18 context.translate(-10, 350); 19 context.beginPath(); 20 context.moveTo(0, 0); 21 context.quadraticCurveTo(170, -50, 260, -190); //绘制小路的曲线 22 context.quadraticCurveTo(310, -250, 410,-250); 23 context.strokeStyle = context.createPattern(gravel, 'repeat'); //用加载好的图片填充小路 24 context.lineWidth = 20; //路宽为20px 25 context.stroke(); 26 context.restore(); 27 //这里开始添加一段canvas文本 28 context.save(); 29 context.font = "50px impact"; 30 context.textAlign = 'center'; 31 context.fillStyle = '#996600'; 32 context.fillText('attention please !', 200, 60, 400); 33 context.restore(); 34 }
//到目前为止，这张画已经完成了。但正如大家看到的，canvas里面还有下雨闪电的效果，这是如何实现的呢？继续往下面看。。。
//requestAnimFrame函数在不同浏览器版本不同，这里合并成单个函数，合并后可支持所有浏览器
1 window.requestAnimFrame = (function(){ 2 return window.requestAnimationFrame || 3 window.webkitRequestAnimationFrame || 4 window.mozRequestAnimationFrame || 5 window.oRequestAnimationFrame || 6 window.msRequestAnimationFrame || 7 function(/* function */ callback, /* DOMElement */ element){ 8 window.setTimeout(callback, 1000 / 60); 9 }; 10 })();
//这里开始制作闪电和暴雨的效果。
1 function drawAFrame() { 2 var context = canvas.getContext('2d'); 3 context.save(); 4 5 drawTrails(); 6 //让天色大多数时间阴沉，创建出闪电的效果 7 if (Math.random() > 0.03) { 8 context.globalAlpha = 0.65; 9 context.fillStyle = '#000000'; 10 context.fillRect(0, 0, 400, 600); 11 context.globalAlpha = 1.0; 12 } 13 //然后根据当前时间进行调整，绘制雨天图像 14 var now = Date.now(); 15 context.fillStyle = context.createPattern(rain, 'repeat'); 16 //创建雨滴，并且基于时间进行重新定位 17 context.save(); 18 context.translate(-256 + (0.1 * now) % 256, -256 + (0.5 * now) % 256); 19 context.fillRect(0, 0, 400 + 256, 600 + 256); 20 context.restore(); 21 //第二个矩形以不同的速率进行，表示暴雨 22 context.save(); 23 context.translate(-256 + (0.08 * now) % 256, -256 + (0.2 * now) % 256); 24 context.fillRect(0, 0, 400 + 256, 600 + 256); 25 context.restore(); 26 27 context.font = '25px san-serif'; 28 context.textAlign = 'center'; 29 context.fillStyle = '#990000'; 30 context.fillText('rain day, Remember bring an umbrella', 200, 550, 400); 31 32 context.restore(); 33 }
//最后递归调用loopAnimation函数，雨滴效果就有了。
1 function loopAnimation(currentTime) { 2 drawAFrame(); 3 window.requestAnimFrame(loopAnimation, canvas); 4 }
ok,大功告成！
怎么样，很好玩吧？其实这个实例只用到了html5的<canvas>元素，并且只是很基本的应用而已，关于<canvas>元素，完全可以写一本书（并且是一本还不会很薄的书），只要你想，你完全可以学会。现在就开始，go get it！
最后给大家推荐一个html5实例的网站：http://mrdoob.com/
-----Edit by Mike.j
转载于:https://www.cnblogs.com/tstcxxzx/archive/2013/05/10/3071472.html