time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > html5 canvas--1.canvas介绍

html5 canvas--1.canvas介绍

时间:2012-09-09 22:59 点击:841次 字体:[ ]




   从今天开始,我们将开始一个关于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库,提供了很多有用的方法,站点地址:http://www.modernizr.com/。

function canvasSupport () {
  return Modernizr.canvas;
}

  canvas支持2d渲染,通过如下代码实现:

var context = theCanvas.getContext("2d");

  下面我们就可以通过context对象在canvas上绘制图像了。

 

  1. //设置区域颜色 
  2. context.fillStyle = "#ffffaa"
  3. //绘制区域 
  4. context.fillRect(0, 0, 500, 300); 
  5. //设置字体 
  6. context.font = "20px _sans"
  7. //设置垂直对齐方式 
  8. context.textBaseline = "top"
  9. //绘制文字 
  10. context.fillText ("Hello World!", 195, 80); 
  11. //设置边框颜色 
  12. context.strokeStyle = "#000000"
  13. //绘制边框 
  14. 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

 



本文地址 : http://www.fengfly.com/plus/view-209183-1.html
标签: HTML5 canvas
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: