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性能测试网站)
HTML5 Canvas核心技术—图形、动画与游戏开发.pdf1的更多相关文章
- HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版
<html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...
- HTML5 Canvas核心技术图形动画与游戏开发(读书笔记)----第一章,基础知识
一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...
- Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识
基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body> & ...
- HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版
HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2
事件处理: HTML5应用程序是以事件来驱动的,可以在canvas中增加一个事件监听器,当事件发生时,浏览器就会调用这个监听器 //方法一canvas.onmousedown=function(e){ ...
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf8
第6章 精灵 精灵(sprite),它是一种可以集成入动画之中的图像对象,赋予它们各种行为,精灵并非Canvas API的一部分,,但都是从它衍生而来 本章将会实现三种设计模式:策略模式(精灵与绘制器 ...
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7
性能 运行putImageData()比drawImage()慢,同等条件下优先考虑drawImage() 操作图像数据需要遍历大量数据,应该注意几点: 1)避免在循环体中直接访问对象属性,应当保存在 ...
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf6
操作图像的像素:getImageData() putImageData() ImageData对象 调用getImageData()方法实际是获取了一个指向ImageData对象的引用,返回的对象包含 ...
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf5
文本的定位 水平与垂直定位:当使用strokeText()和fillText()绘制文本时,指定了所绘文本的X与Y坐标,还有textAlign与textBaseline两个属性 textAlign:s ...
随机推荐
- 九度OJ 1435 迷瘴
题目地址:http://ac.jobdu.com/problem.php?pid=1435 题目描述: 通过悬崖的yifenfei,又面临着幽谷的考验—— 幽谷周围瘴气弥漫,静的可怕,隐约可见地上堆满 ...
- 嵌入式linux无线网卡的使用
from:http://blog.csdn.net/sparksalmon/article/details/8445287 嵌入式linux无线网卡的使用 最近一直在开发机顶盒上的无线功能,把这一段的 ...
- PHP PhantomJs中文文档(翻译)
介绍 PHP PhantomJS 是一个灵活的 PHP 库加载页面通过 PhantomJS 无头浏览器并将返回页面响应.这是方便于需要JavaScript的支持,同时还支持截屏测试网站.功能列表通过 ...
- SQL效率低下原因主要有
类别 子类 表达式或描述 原因 索引 未建索引 产生全表扫描 未利用索引 substring(card_no,1,4)=′5378′ 产生全表扫描 amount/30< 1000 ...
- iOS 之 多线程一
iOS中实现多线程的技术方案 pthread 实现多线程操作 代码实现: void * run(void *param) { for (NSInteger i = 0; i < 1000; ...
- 安装plsql
sqlplus能登录,服务器.网络.tns配置应该都是好的,应该就是plsql本身的问题 问下安装路径在哪? 注意安装路径中不能有括号,不要安装在C:\Program Files (x86)目录下面
- ms-on-input
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- .h头文件、 .lib库文件、 .dll动态链接库文件之间的关系
转自.h头文件. .lib库文件. .dll动态链接库文件之间的关系 h头文件作用:声明函数接口 dll动态链接库作用:含有函数的可执行代码 lib库有两种: (1)静态链接库(Static Liba ...
- 【整理】各种Python的IDE(集成开发环境)的总结和对比
原地址:http://www.tuicool.com/articles/rMVJNn 原文 http://www.crifan.com/summary_common_python_ide_pyscr ...
- PYTHON小CASE
import os import time source = ['C:\\py\\', 'C:\\work\\'] target_dir = 'C:\\backup' today = target_d ...