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

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

从今天开始，咱们将开始一个关于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