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


Posted in HTML / CSS onJanuary 07, 2013

从今天开始,我们将开始一个关于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
HTML / CSS 相关文章推荐
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 #HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 #HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 #HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 #HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 #HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 #HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 #HTML / CSS
You might like
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
快速开发一个PHP扩展图文教程
2008/12/12 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
js中有关IE版本检测
2012/01/04 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python连接mongodb集群方法详解
2020/02/13 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
大班上学期幼儿评语
2014/04/30 职场文书
五四青年节演讲稿
2014/05/26 职场文书
2014年校务公开工作总结
2014/12/18 职场文书