| 标题 | html5 canvas-1.canvas介绍(hello canvas) |
| 内容 | 我们将开始一个关于html5 canvas的系列课程。这个系列是我读《HTML5 Canvas：Native Interactivity and Animation for the Web》后的总结，有兴趣的朋友可以去下载英文原版书籍阅读。这本书通过介绍canvas游戏开发的方式，向我们展现canvas强大的功能，我觉得相当不错，通过阅读这本书我学到了canvas很多的知识。其实canvas本身的api并不多，关键是活学活用，学会对api的组合使用制作出令人难以置信的效果。而这本书就是你学习canvas最好的选择，只可惜他暂时还没有中文版，英文不好的朋友只有再等等了。 大家都知道，目前并不是所有的浏览器中支持html5，就算是支持html5的浏览器，也不见得支持html5所有的新特性。所以大家要选择一款比较新的浏览器作为自己的调试环境，建议大家使用firefox（开发者的最爱）或者是chrome浏览器，我所有的例子都是基于firefox开发的。 html5相关的基础知识这里就不做介绍了，网上有很多关于html5的教程，自行学习吧。学习html5需要大家有比较好的javascript的基础，大家可以去汤姆大叔的博客进行学习：http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html。其实他的这个系列课程还是有相当难度的，50多篇全学好你应该算是js专家了。 现在我们正式开始我们的canvas课程，第一个例子：“hello canvas”。 首先需要在body中添加canvas标签，如下： 代码如下: <canvas id="canvasOne" width="500" height="300"> Your browser does not support HTML5 Canvas. </canvas> canvas中的text部分将会在浏览器不支持canvas对象时显示。 定义了canvas标签，当我们需要通过js对他进行操作的时候，通过getElementById就可以实现。 var theCanvas = document.getElementById("canvasOne");我们现在已经习惯使用jquery来开发任务，那么使用jquery如何获取canvas对象呢？ var canvas = $('#canvasOne').get(0);或var canvas = $('#canvasOne')[0];不知道大家注意到get(0)和[0]没有，如果没有使用get()方法或者[]下标的话，你的js代码将不能正常对canvas进行操作。因为$('#canvasOne')获取到的是一个jquery对象，而我们实际要操作的是一个html dom对象。这里有存在一个jquery对象转变成dom对象的问题，通过get()或者下标的方式就完成了这个转换。如果需要把一个dom对象转换成jquery对象，可以使用$()方法实现。不清楚的朋友只有自己去百度了，这里不做深究。 为了代码的健壮性，我们需要判断你的浏览器是否支持canvas对象，可以通过下面代码实现。 代码如下: if (!theCanvas || !theCanvas.getContext) { return; } 不过推荐大家使用modernizr.js库完成这一工作，这是一个很通过的html5 js库，提供了很多有用的方法 代码如下: function canvasSupport () { return Modernizr.canvas; } canvas支持2d渲染，通过如下代码实现： var context = theCanvas.getContext("2d"); 下面我们就可以通过context对象在canvas上绘制图像了。 代码如下: //设置区域颜色 context.fillStyle = "#ffffaa"; //绘制区域 context.fillRect(0, 0, 500, 300); //设置字体 context.font = "20px _sans"; //设置垂直对齐方式 context.textBaseline = "top"; //绘制文字 context.fillText ("Hello World!", 195, 80); //设置边框颜色 context.strokeStyle = "#000000"; //绘制边框 context.strokeRect(5, 5, 490, 290); 下面介绍下图片的绘制。由于图片的异步下载的，为了保证你用canvas绘制一个图片时，该图片已经下载完毕，我们使用下面的方式： 代码如下: var helloWorldImage = new Image(); helloWorldImage.src = "helloworld.gif"; helloWorldImage.onload = function () { context.drawImage(helloWorldImage, 160, 130); } 当图片下面完毕时，会触发onload事件，这里再使用context对象绘制图片。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。