HTML5 Canvas核心技术—图形、动画与游戏开发.pdf5
文本的定位
水平与垂直定位:当使用strokeText()和fillText()绘制文本时,指定了所绘文本的X与Y坐标,还有textAlign与textBaseline两个属性
textAlign:start(默认) center end left right,当canvas元素的dir属性是ltr时,left效果与start相同,right与end相同,如果dir属性是rtl,则相反
textBaseline:top bottom middle alphabetic(默认,基于拉丁字母) ideographic(日文或中文) hanging(印度语)
文本的度量:measureText()方法返回一个TextMetrics对象,包含一个width的属性
context.measureText(...).width;
第4章 图像与视频
Canvas绘图环境对象提供了4个用于绘制及操作图像的方法
drawImage() getImageData() putImageData() createImageData()
图像的绘制(在图像读取完毕后才可以加载)
绘制时,所绘的图像叫做“源图像”,记为s;绘制到的地方记为d
drawImage(image,dx,dy)
drawImage(image,dx,dy,dw,dh)(进行缩放)
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)(选取部分图像并缩放)
第一个参数是HTMLImageElement类型的图像对象或HTMLCanvasElement类型的canvas对象或HTMLVideoElement类型的视频对象
在放大倍数大于1.0情况下,x、y取值为负数,可以使图像绘制在canvas之外
离屏canvas,经常用来存放临时性图像信息,通常有4个步骤:
创建用作离屏canvas元素
设置离屏canvas的宽度与高度
在离屏canvas之中进行绘制
将离屏canvas的全部或一部分内容复制到正在显示的canvas之中
offscreenCanvas=document.createElement('canvas')创建一个不属于任何DOM元素的canvas元素(故称之为离屏canvas),需要重新设定其width和height
离屏canvas会占据一定内存,不过可以显著提高绘图效率
HTML5 Canvas核心技术—图形、动画与游戏开发.pdf5的更多相关文章
- 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核心技术—图形、动画与游戏开发.pdf1
canvas元素可以说是HTML5元素中功能最强大的一个,它真正的能力是通过Canvas的context对象(绘图上下文)表现出来的 fillText()方法使用fillStyle属性来填充文本中的字 ...
随机推荐
- Microsoft Windows Installer 工具 Msiexec.exe 的命令行选项
摘自:http://support.microsoft.com/kb/314881/zh-cn 概要 本文列出了 Windows Installer 工具 Msiexec.exe 的命令行选项.Msi ...
- ASP.NET获取服务器文件的物理路径
如下: string fullpath = context.Server.MapPath("hello.htm"); //得到hello.htm的全路径 string conten ...
- svn-添加忽略文件
svn ps svn:ignore '文件夹名|文件名(不能是文件夹/文件名)' . svn pe svn:ignore . export SVN_EDITOR=/usr/bin/vim #设置环境变 ...
- 小笔记(一):ajax传递数组及将ajax返回数据赋值
当使用ajax传递数据时,有可能传递多个数据,这是使用以下方法传递数据就会显得数据过多且混杂 $.ajax({ type:'post', url:url, data:{data:data,conten ...
- linux命令之chown命令
发布:JB01 来源:脚本学堂 [大 中 小] 本文介绍下,linux系统中用于文件与目录权限管理的命令 chown命令的用法,chown将指定文件的拥有者改为指定的用户或组.有需要的朋友 ...
- Python 集合(set)使用
1.python的set和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和消除重复元素. 集合对象还支持union(联合), intersection(交), difference(差 ...
- 如何利用C生成.so供Mono调用
Mono诞生的初衷是为了吸引更多的Windows .Net程序员来加入Linux平台的开发.但在Linux世界中C语言依然是 主流.很多时候一些关键应用(比如大型 笛卡儿 乘积运算.需要调用平台硬件功 ...
- 基础canvas应用-钟表绘制
首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...
- Android Camera 预览图像被拉伸变形的解决方法【转】
问题描述: 预览图像被拉伸变形 问题原因: 由于预览图像大小跟SurfaceView 大小不一致引起 解决方法: 获取系统支持的所有预览尺寸[getSupportedPictureSizes],然后再 ...
- 工作总结:文件对话框的分类(C++)
原文地址:http://www.jizhuomi.com/software/173.html 文件对话框分为打开文件对话框和保存文件对话框,相信大家在Windows系统中经常见到这两种文件对话框.例如 ...