html5 canvas--1.canvas介绍-阿里云开发者社区

开发者社区> bill.kang> 正文

html5 canvas--1.canvas介绍

简介:   从今天开始,我们将开始一个关于html5 canvas的系列课程。这个系列是我读《HTML5 Canvas:Native Interactivity and Animation for the Web》后的总结,有兴趣的朋友可以去下载英文原版书籍阅读。
+关注继续查看

  从今天开始,我们将开始一个关于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上绘制图像了。

//设置区域颜色
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

adpics.aspx?source=kbh1983&sourcesuninfo

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
1.1专题介绍「深入浅出ASP.NET Core系列」
原文:1.1专题介绍「深入浅出ASP.NET Core系列」 大家好,我是IT人张飞洪,专注于.NET平台十年有余。 工作之余喜欢阅读和写作,学习的内容包括数据结构/算法、网络技术、Linux系统原理、数据库技术原理,设计模式、前沿架构、微服务、容器技术等等…… 喜欢但不限于,Java、C、C++、Python、Javascript……Wait……不装了,因为我也还在学习的路上,愿你我一起终生学习。
758 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10089 0
Tomcat目录介绍以及运行时寻找class的顺序
来自:http://blog.csdn.net/lihai211/article/details/6651977 Tomcat下的文件目录 /bin:存放启动和关闭tomcat的脚本文件; /conf:存放tomcat的各种配置文件,比如:server.xml /server/lib:存放tomcat服务器所需要的各种jar文件(jar文件只可被tomcat 服务器访问) /server/webapps:存放tomcat自带的两个web应用:admin应用和manager应用。
839 0
html5 canvas--1.canvas介绍
  从今天开始,我们将开始一个关于html5 canvas的系列课程。这个系列是我读《HTML5 Canvas:Native Interactivity and Animation for the Web》后的总结,有兴趣的朋友可以去下载英文原版书籍阅读。
713 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13892 0
Cassandra gossip介绍系列之一
介绍cassandra的gossip系列之一
1617 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
+关注
bill.kang
从事软件研发十余年,入行前端开发六年有余,对前端工程化有一定认识。 现就职于客如云科技有限公司,任前端技术经理一职。
109
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载