js-JavaScript高级程序设计学习笔记12
第十五章 使用canvas绘图
1、要使用<canvas>元素,必须先设置其width和height属性。
2、要在这块画布上绘图,需要先取得绘图上下文,取得绘图上下文对象的引用,需要调用getContext()方法并传入上下文的名字,如2d。使用前先对getContext进行能力检测。
3、使用toDataURL()方法可以导出绘制的图像。
4、2D上下文。2D上下文的坐标开始于左上角,左上角为(0,0)。
1、填充和描边。两个属性:fillStyle和strokeStyle。
2、绘制矩形。唯一一种可以直接在2d上下文中绘制的形状。与之有关的方法:fillRect()/strokeRect()/clearRect()。接受四个参数:x/y/宽/高。描边线条宽度由lineWidth控制,线条末端形状由lineCap控制,线条相交形状由lineJoin控制。
3、绘制路径。
4、文本。textAlign和textBaseline中的值的含义:【给定的点】是文本的【值】。比如textAlign中的start,表示给定的点是文本的start,所以看起来文字靠右。textBaseline中值为top时,表示给定的点是文本的top线,所以文字是靠下的。measureText()方法用于辅助确定文本的大小。
var fontSize=100;
context.font=fontSize+"px Arial"; while (context.measureText("Hello World!").width>140) {
fontSize--;
context.font=fontSize+"px Arial";
}5、变换。save()方法保存设置和变换,restore()方法调用。先进后出。
6、绘制图像。drawImage()方法。
7、阴影。
8、渐变。渐变的坐标要与绘制的图形坐标相匹配。线性渐变/放射渐变。
9、模式。模式其实就是重复的图像,可以用来填充或描边图形。调用createPattern()方法创建一个新模式。注意:将填充样式设置为模式对象,指标是在填充区域内显示图像,而不是从填充位置开始绘制图像。图像是从原点开始的。
10、使用图像数据。通过getImageData()取得原始图像数据,返回的对象是ImageData的实例,有三个属性:width/height/data。data是个数组,保存每个像素的rgba。可利用data使图像彩色变黑白。
11、合成。会应用到所有绘制操作的属性:globalAlpha和globalCompositionOperation。前者设置全局透明度,后者表示后绘制的图形与已绘制图形的结合方法。
js-JavaScript高级程序设计学习笔记12的更多相关文章
- JavaScript高级程序设计---学习笔记(一)
今天,2017.3.17开始利用课余时间仔细学习<JavaScript高级程序设计>,将需要掌握的知识点记录下来,争取把书里的所有代码敲一遍并掌握. 1.标识符命名最好是第一个字母小写,剩 ...
- javascript高级程序设计学习笔记
javascript高级程序设计,当枕头书已经好久了~zz 现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...
- javascript 高级程序设计 学习笔记
<!--<script> // 异步请求封装 IE6即以上浏览器 // ajax(url,fnSucc,selectID,fnFaild) //url 请求地址 //fnSucc 异 ...
- JavaScript高级程序设计---学习笔记(二)
面向对象程序设计1.属性类型.定义多属性.读取属性特性对象的属性在创建时都带有一些特征值,JavaScript通过这些特征值来定义它们的行为.这些特性是为了实现JavaScript引擎用的,因此不能直 ...
- JavaScript高级程序设计学习笔记第十章--DOM
1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...
- JavaScript高级程序设计学习笔记--DOM
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口). Document类型 文档的子节点 虽然DOM标准规定Document节点的子节点可以是DocumentType,Ele ...
- Javascript高级程序设计学习笔记一
看完w3school的javascript的概念,有点基础,开始红皮书的路程,今晚总结前二章的心得. 第一章:javascript简介 重点是javascript的实现是由 ECMAScript(核心 ...
- JavaScript高级程序设计---学习笔记(五)
1.2D上下文 1)填充与描边 填充和描边的两个操作取决于两个属性:fillStyle和strokeStyle.两个属性的值可以是字符串.渐变对象或模式对象,默认值都是#000000 例: html: ...
- JavaScript高级程序设计学习笔记--面向对象的程序设计(二)-- 继承
相关文章: 面向对象的程序设计(一) — 创建对象 http://www.cnblogs.com/blackwood/archive/2013/04/24/3039523.html 继承 继承是OO语 ...
- JavaScript高级程序设计学习笔记第八章--BOM
1.间歇调用和超时调用: 超时调用:需要使用 window 对象的 setTimeout()方法,它接受两个参数:要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫秒).其中,第一个参数可以 ...
随机推荐
- http协议(十)实体首部字段
1.定义 包含在请求和响应中的实体部分所使用的首部,用于补充内容的更新时间等与实体相关的信息 2.Allow 通知客户端能够支持的Request-URI指定资源的所有http方法 如果服务器接收到不支 ...
- Python的高级特性4:函数式编程
函数式编程的核心就是把函数当成对象来进行编程. 有两个常用到的方法:map/reduce,filter,其中map和filter是内建方法,而reduce不是,所以需要import相关模块. map接 ...
- 设置root用户不保存终端历史记录到.bash_history
在.bashrc的最后行追加 unset HISTFILE cat .bash_history 还能看到 unset HISTFILE 之前保留的命令unset HISTFILE 之后的命令不会保留, ...
- PAT 1005. 继续(3n+1)猜想 (25)
卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对n=3进行验证的时候, ...
- MySQL的mysql_insert_id和LAST_INSERT_ID(转)
本文介绍的是mysql中last_insert_id和mysql_insert_id的区别 1 mysql_insert_id 一.PHP获取MYSQL新插入数据的ID mysql_insert_id ...
- Reverse Words in a String
void reverseWords(string &s) { string res = "", tmp = ""; int l = s.length() ...
- (一)GATT Profile和GAP 简介(目前所有的BLE应用都基于GATT,所以也要了解是怎么一回事)-转发
个人大总结:(先后顺序) 1.GAP协议定义多个角色(其中就有中心设备[GATT客户端](唯一)叫主设备||和外围设备[GATT服务端端](多个)也叫从设备). 2.先经过GAP协议,再有GATT协议 ...
- 2016年优秀的java网站分享
java中文网站 伯乐在线java版:http://www.importnew.com/ 码农网:http://www.codeceo.com/ infoq:http://www.infoq.com/ ...
- 基于DDD的.NET开发框架 - ABP仓储实现
返回ABP系列 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应 ...
- css 图片的无缝滚动
转载:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html js的图片的横向或者竖向的无缝滚动图片. ttp://zx.bjmylike.com/ ...