首页 > 代码库 > HTML5 Canvas核心技术—图形、动画与游戏开发.pdf1
HTML5 Canvas核心技术—图形、动画与游戏开发.pdf1
canvas元素可以说是HTML5元素中功能最强大的一个,它真正的能力是通过Canvas的context对象(绘图上下文)表现出来的
fillText()方法使用fillStyle属性来填充文本中的字符,strokeText()方法使用strokeStyle属性描绘字符的轮廓线,fillStyle属性和strokeStyle属性可以是CSS格式的颜色、渐变色或是图片
fillText()与strokeText()方法都需要3个参数:要绘制的文本内容,以及在canvas中显示文本的横、纵坐标
注意:在设置canvas的宽度与高度时,不能使用px后缀,取值只能是非负整数
实际上,canvas元素有两套尺寸,一个是元素本身的大小,还有一个是元素绘图表面(drawing surface)的大小;
直接设置元素的width与height属性时,实际上是同时修改了该元素本身大小与元素绘图表面的大小;如果通过CSS来设定canvas元素的大小,只会改变元素本身的大小,不会影响到绘图表面(默认情况下,canvas元素与其绘图表面都是300像素宽、150像素高)
当canvas元素的大小不符合其绘图表面的大小时,浏览器就会对绘图表面进行缩放,使其符合元素的大小
canvas元素的API,提供两个属性和三个方法
cancas本身很少用到,偶尔通过它来获取canvas的宽度、高度或某个数据地址,其他的2d绘图环境属性都与绘图操作有关
将在后面的章节中详细介绍
JavaScript是一门动态语言,所以可以向绘图环境中添加新方法或者对已有方法进行扩充
Canvas中,与2d绘图环境对应的是3d绘图环境叫做WebGL
Canvas状态的保存与恢复:
Canvas的API提供了两个名叫save()和restore()方法,用于保存及恢复当前canvas绘图环境的所有属性
save()方法将当前的绘图环境压入堆栈顶部,restore()方法则会从堆栈顶部弹出一组状态信息,据此恢复当前绘图环境的各个状态。这意味着可以嵌套式调用这两个方法
var canvas=document.getElementById(‘canvas‘), //canvas元素的引用
context=canvas.getContext(‘2d‘); //其绘图环境的引用
将canvas元素的实现者称为User Agent(中文意为用户代理,简称UA)
explorecanvas和Google Chrome Frame项目支持在IE6、7、8使用canvas
性能分析器(Profiler)
时间轴工具(Timeline)
jsPerf.com(js性能测试网站)