html5 canvas-1.canvas介绍(hello canvas)

前端  /  管理员 发布于 6年前   192

从今天开始，我们将开始一个关于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对象绘制图片。
大家下载demo看完整代码，demo下载地址：html5canvas.helloworld.zip