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性能测试网站）
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
