HTML5 学习总结（四）canvas绘图 WebGL SVG(3)_H5之家 - 中国HTML5教程资源分享第一站

示例代码：

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>绘制文字</title> </head> <body> <canvas id='canvas1' width='600' height='600'></canvas> <img src='img/apple.png' id='apple' hidden='hidden' /> <script type='text/javascript'> //必须当页面中的图片资源加载成功 window.onload = function() { //获得画布元素 var canvas1 = document.getElementById('canvas1'); //获得2维绘图的上下文 var ctx = canvas1.getContext('2d'); //设置线宽 ctx.lineWidth = 1; //设置线的颜色 ctx.strokeStyle = 'dodgerblue'; ctx.moveTo(0,0); ctx.strokeRect(0,0,600,600); //绘制文字 //描边 ctx.font='50px microsoft yahei'; ctx.strokeText('Hello Zhangguo',20,100); //填充 ctx.fillStyle= ctx.fillText('Hello Zhangguo',20,200); } </script> </body> </html>

运行结果：

1.7、随机颜色与简单动画

主要结合随机方法与定时器、时钟实现简单的动画。

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>随机颜色与简单动画</title> </head> <body> <canvas id='canvas1' width='1000' height='650'></canvas> <img src='img/apple.png' id='apple' hidden='hidden' /> <script type='text/javascript'> var magicCircle = { randomColor: function() { return '#' + parseInt(Math.random() * 16777216).toString(16); }, getNum: function(min, max) { return parseInt(Math.random() * (max - min)) + min; }, r: 10, run: function() { //获得画布元素 this.canvas1 = document.getElementById('canvas1'); //获得2维绘图的上下文 this.ctx = this.canvas1.getContext('2d'); //运行 setInterval(this.draw, 100); this.bindEvent(); }, draw: function() { magicCircle.ctx.beginPath(); magicCircle.ctx.lineWidth = magicCircle.getNum(1,10); magicCircle.ctx.strokeStyle = magicCircle.randomColor(); magicCircle.ctx.arc(magicCircle.getNum(1,1000), magicCircle.getNum(1,600), magicCircle.r, 0, Math.PI * 2); magicCircle.ctx.stroke(); magicCircle.r += 10; if(magicCircle.r > 300) magicCircle.r = 10; }, bindEvent:function() { this.canvas1.onmousemove=function(e){ magicCircle.ctx.lineWidth = magicCircle.getNum(1,10); magicCircle.ctx.strokeStyle = magicCircle.randomColor(); magicCircle.ctx.arc(e.clientX, e.clientY, magicCircle.r, 0, Math.PI * 2); magicCircle.ctx.stroke(); magicCircle.r += 10; if(magicCircle.r > 300) magicCircle.r = 10; } } }; magicCircle.run(); </script> </body> </html>

运行效果：

二、WebGL

WebGL（全写Web Graphics Library）是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

WebGL完美地解决了现有的Web交互式三维动画的两个问题：

第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;

第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

通俗说WebGL中canvas绘图中的3D版本。因为原生的WebGL很复杂，我们经常会使用一些三方的库，如three.js等，这些库多数用于HTML5游戏开发。