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()方法,它接受两个参数:要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫秒).其中,第一个参数可以 ...
随机推荐
- GT考试(bzoj 1009)
Description 阿申准备报名参加GT考试,准考证号为N位数X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的数字.他的不吉利数学A1A2...Am(0< ...
- VS清除打开项目时的TFS版本控制提示
原文:http://blog.useasp.net/archive/2015/12/15/how-to-permanently-remove-vs-project-TFS-source-version ...
- vs2015企业版太大了
安装教程 http://www.cnblogs.com/mephisto/archive/2015/07/22/4666032.html#!comments 新功能 http://news.cnblo ...
- BZOJ 1030 【JSOI2007】 文本生成器
Description JSOI交给队员ZYX一个任务,编制一个称之为"文本生成器"的电脑软件:该软件的使用者是一些低幼人群,他们现在使用的是GW文本生成器v6版.该软件可以随机生 ...
- 设置apache https服务
配置http.conf,所在位置d:\wamp\bin\apache\apache2.4.9\conf\http.conf LoadModule socache_shmcb_module modu ...
- jQuery使用.on()无法绑定hover
发现好像没有hover这个事件,jQuery的hover事件是一个封装,hover算不得一个事件.他只是将mouseover和mouseout合并了用mouseover和mouseout两个配合效果好 ...
- Visual Studio2012打开时弹出“遇到异常:这可能是由某个扩展导致的”错误的解决办法
Visual Studio2012打开时弹出"遇到异常:这可能是由某个扩展导致的"错误的解决办法: 具体问题如下: 分析原因:网上搜集了以下,出现异常的原因是安装了第三方控件,然后 ...
- 浅谈设计模式--组合模式(Composite Pattern)
组合模式(Composite Pattern) 组合模式,有时候又叫部分-整体结构(part-whole hierarchy),使得用户对单个对象和对一组对象的使用具有一致性.简单来说,就是可以像使用 ...
- Qt学习笔记 信号和槽
槽和普通c++成员函数一样只可以为虚函数,也可以被重用,可以是公有的也可以是私有的,也可以被其它的c++函数调用; 参数也是任意的 唯一不同的是本槽和信号是可以连在一起的,和c#的事件差不多.相连后每 ...
- C#微信公众号开发系列教程六(被动回复与上传下载多媒体文件)
微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...