Web前端开发技术与实践 第18章:绘图 阮晓龙 /

Slides:



Advertisements
Similar presentations
老百姓学中医. 有病靠医生? 治病靠医保? 健康靠什么? 世界卫生组织: “ 世界上三分之二的病人不是死于疾病, 而是死于无知。 ” 19 岁大男孩发高烧连续 11 天打吊瓶后出现肾衰竭 篮球、洗澡、冷饮、夜里发烧、打吊瓶、指标  西医:病毒、肾功能衰竭、换肾  中医:风寒、热铁锅浇凉水、驱寒补肾.
Advertisements

醫學美學之我見ー肉毒桿菌 班級:應日三乙 姓名:蔡雅卉 學號: 497E0076. 前言 現在的人,已經把 整型看做是微不足 道的事情了。即使 只是戴牙套、局部 雷射、割雙眼皮、 打美白針、肉毒桿 菌等等,都可以在 身體上做不同的改 變,而讓自己更滿 意自己的外表。
A-1 A-2 A-3 A-4 A-5 A-7 A-6 A-8 A-9. B-1 B-2 B-3 B-4.
一、老师申请题目,以下指导老 师操作。 1. 登录教务系统 web 端. 2. 点击 “ 毕业设计 ” 工具栏下拉菜单中的 “ 论文 _ 教师申请题目 ”
阿布杜艾尼 · 米吉提 上海医学院 网络虚拟环境在医学中的应用 谷歌人体浏览器.
急性腹痛 急性疼痛. 急性疼痛 — 孙树杰、沈洪、 刘保池 (1)(1)(1)(1) 概 述 (2)(2)(2)(2) 重症急性腹痛的临床特点 (3)(3)(3)(3) 急性腹痛的分类及诊治 主要教学内容.
温州地区特产.
陋室铭 商丘六中课题组 施舒姗.
資訊科技挑戰獎勵計劃 樂善堂梁銶琚學校 6A(06)陳芷蘊 中華白海豚. 資訊科技挑戰獎勵計劃 樂善堂梁銶琚學校 6A(06)陳芷蘊 中華白海豚.
讲故事训练 授课人:田轶.
5.1 二元一次不等式(组)与平面区域 神木职教中心数学组:杨荣.
一、平面点集 定义: x、y ---自变量,u ---因变量. 点集 E ---定义域, --- 值域.
第十一課 菜園 6-11.
小学五年级语文第三、四单元复习 华南师大附小五年级.
中国特色社会主义政党制度 主讲:西南大学 李强 2011年12月28日.
“寓言是个魔袋,袋子很小,却能从里面取出很多东西来,甚至能取出比袋子大得多的东西来。”
校本选修课 第三专题 西藏问题 北京师大二附中 李文燕.
動畫與遊戲設計 2D Game 程于芳 老師
欢迎南京市政治学科的教研同仁 光临指导.
第八章 网络课程的设计与开发.
宏心报国,沐祖国阳光,应卧薪尝胆,苦心吞吴。 志向高远,浴名校雨露,当破釜沉舟,背水一战。
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
管理学基本知识.
第五部分 特色专题 专题四 文学常识备考集萃.
滁州学院首届微课程教学设计竞赛 课程名称:高等数学 主讲人:胡贝贝 数学与金融学院.
正修科技大學教學發展中心 教師教學觀摩與經驗分享 電子工程系 張法憲副教授.
Java Applet的运行原理 在网页向Java Applet传值 在Java Applet中播放声音 在Java Applet中使用组件
2015/Spring 跨平台行動程式進階應用 王派洲老師
Canvas繪圖 Canvas簡介 2D繪圖工具 移動、選轉、縮放.
互联网时代班主任的挑战 万玮 2014年9月20日.
同学们,开始上课了,让我们伴随着乐曲,走进这节课吧!
拾貳、 教育行政 一、教育行政的意義 教育行政,可視為國家對教育事務的管理 ,以增進教育效果。 教育行政,乃是一利用有限資源在教育參
科學科 污染 空氣 成因 的 : 題目 及 減少空氣污染的方法 陳玉玲 (4) 姓名 : 去到目錄.
蘇軾詞的賞析
92-90數學課程綱要比較 -- 不含數與計算 台北市立師範學院 數學資訊教育系副教授 李源順.
課程銜接 九年一貫暫行綱要( )  九年一貫課程綱要( ) 國立台南大學數學教育系 謝 堅.
2.4 二元一次方程组的应用(1).
屈原列传 志洁行廉,爱国忠君真气节; 辞微旨远,经天纬地大诗篇。 旨远辞高,同风雅并体; 行廉志洁,与日月同光。
柯奕宏(06) 王予亨(13) 郭秉逸(15) 楊雯凈(23) 顏佑瑩(32)
第十五章 传播学调查研究方法.
自然與生活科技領域 認識太陽能 蘇紋琪、石明玉.
 全能的天才畫家- 李奧納多‧達文西 (西元1452年-1519年) 指導老師:袁淑芬老師 製作人:饒佩芯.
Web前端开发技术与实践 第12章 布局 阮晓龙 /
網路程式設計期末專案 Master Drummer 資工3A B 陳天盛.
鄉村尋根-農具篇.
Web前端开发技术与实践 第10章:盒子模型 阮晓龙 /
HTML5全栈开发序列课程 《前端入门》之CSS3新特性 余鹏作品.
Web前端开发技术与实践 第11章:背景与边框 阮晓龙 /
CHAPTER 18 CSS樣式表的動態效果.
認識我的故鄉_台中市.
基礎程式設計範例 -網頁名片.
可降阶的高阶方程 一、 型的微分方程 二、不显含未知函数的方程 三、不显含自变量的方程.
第十三章 繪 圖 13-1 繪圖方法 13-2 繪圖屬性 13-3 綜合範例.
Web前端开发技术与实践 第9章:文字样式 阮晓龙 /
101年度經費結報說明 會計室 黃玉露.
保留字與識別字.
樂樂請假了 尊重的故事 資料來源:臺北縣國民小學品德教育手冊 故事來源:臺北縣國民小學品德教育手冊 網路小故事
“修身成材” 班级干部培训班 黑龙江大学党委学工部.
如何制订幼儿园园本培训工作计划 大连亿达世纪城幼儿园 姜承华 2011年3月10日.
喜雨亭記 國二甲 S 陳姿婷.
第四节 微分 函 数 的 微 分 微分的定义 微分的几何意义 基本初等函数的微分公式 基本初等函数 的微分公式与 微分的运算法则
Java语言程序设计 清华大学出版社 第6章 java图形与图像处理.
第6章 层次原理图设计和多通道技术: 重点内容: 掌握自上而下的层次原理图设计方法 掌握自下而上的层次原理图设计方法
第五章 图形变换 在计算机绘图应用中,经常要进行从一个几何图形到另一个几何图形的变换,例如,将图形向某一方向平移一段距离;将图形旋转一定的角度;或将图形放大或缩小等等,这种变换过程称为几何变换。图形的几何变换是计算机绘图中极为重要的一个组成部分,利用图形变换还可以实现二维图形和三维图形之间转换,甚至还可以把静态图形变为动态图形,从而实现景物画面的动态显示。
导入新课 在上一堂课我们曾随着郦道元一起畅游三峡,领略了它的雄奇险拔、清幽秀色。其实,莽莽神州,高山大岳,千流百川,那神奇如画的风光无不让人心动神摇,今天我们再学习陶弘景的《答谢中书书》,共同欣赏一幅清丽的山水画,品味一首流动的山水诗。
Web前端开发 第7章:初识CSS3 阮晓龙 / 河南中医药大学管理科学与工程学科
統計網路學習館 線性迴歸.
《戰國策·趙威后問齊使》.
用加減消去法解一元二次聯立方程式 台北縣立中山國中 第二團隊.
電子表單 簡介 高雄市鳳山區新甲國小 陳信宏.
Presentation transcript:

Web前端开发技术与实践 第18章:绘图 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.book.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9

本章主要内容 Canvas基础知识 图形绘制 图形变换与控制 案例:用Canvas绘制统计报表

1.Canvas基础知识 基本原理 Canvas元素在页面上提供一块像画布一样无色透明的区域,可通过Javascript脚本绘制图形。 在HTML页面上定义Canvas元素除了可以指定id、style、class、hidden等通用属性之外,还可以指定以下2个属性: height:设置画布组件的高度。 width:设置画布组件的宽度。

1.Canvas基础知识 在画布上绘制图形必须经过以下三个步骤: 获取Canvas对应的DOM对象,得到一个Canvas对象。 调用Canvas对象的getContext()方法,得到CanvasRenderingContext2D对象­(可绘制图形)。 调用CanvasRenderingContext2D对象方法绘图。

1.Canvas基础知识 Canvas API Canvas API通过调用Canvas对象的getContext()方法获得图形对象。 调用传入参数【2d】,返回的CanvasRenderingContext2D对象就是Canvas API对象实例,叫做2D渲染上下文。

1.Canvas基础知识 1.2绘图方法 常见的绘图方法如下:

1.Canvas基础知识 1.3绘图属性 CanvasRenderingContext2D属性功能用法如下:

2.图形绘制 CanvasRenderingContext2D提供了fillRect() 和strokeRect()这2个绘制矩形的方法: 2.1矩形 CanvasRenderingContext2D提供了fillRect() 和strokeRect()这2个绘制矩形的方法: fillRect(float x, float y, float width, float height):用于填充一个矩形区域,前两个参数x、y定义该矩形区域的起点坐标,决定了矩形的位置;width定义矩形区域的宽度;height定义矩形区域的高度。 strokeRect(float x, float y, float width, float height):用于绘制一个矩形边框,也就是用线条绘制出矩形的轮廓参数,功能和上一个方法相同。

2.图形绘制 线条 线条在Canvas绘图中被称为路径。 在Canvas上使用路径的步骤如下: 2.2线条 线条 线条在Canvas绘图中被称为路径。 在Canvas上使用路径的步骤如下: 定义路径,调用CanvasRenderingContext2D对象的beginPath()方法; 定义子路径,可以使用的方法有arc()、arcTo()、bezierCurveTo()、lineTo()、moveTo()、quadraticCurveTo()、rect(); 关闭路径,调用CanvasRenderingContext2D对象的closePath()方法; 填充路径或绘制路径,调用CanvasRenderingContext2D对象的fill()方法或stroke()方法。

2.图形绘制 CanvasRenderingContext2D绘制线条方法介绍如下: 2.2线条 CanvasRenderingContext2D绘制线条方法介绍如下: moveTo (float x, float y):把Canvas的当前路径结束点移动到x、y对应的点; lineTo (float x, float y):把Canvas的当前路径从当前结束点连接到x、y的对应点。

2.图形绘制 多边形 CanvasRenderingContext2D只提供了绘制矩形的方法,要使用路径才能绘制复杂的几何图形。 2.3多边形 多边形 CanvasRenderingContext2D只提供了绘制矩形的方法,要使用路径才能绘制复杂的几何图形。 正多边形中心点为(dx,dy),外圆半径为size,边数为n,相邻两定点与中心点形成的角的弧度为2 * Math.PI / n。

2.图形绘制 2.4圆角矩形 圆角矩形 通过CanvasRenderingContext2D绘制矩形的方法,设置lineJoin = "round"可以向画布添加圆角矩形,但矩形的圆角不可控制。 CanvasRenderingContext2D使用arcTo()方法绘制可控的圆角矩形。 arcTo(float x1, float y1, float x2, float y2, float radius):向Canvas的当前路径上添加一段圆弧。 arcTo()方法确定一段圆弧的方式是:假设从当前点到P1(x1,y1)绘制一条线段,再从P1(x1,y1)到P2(x2,y2)绘制一条线段,arcTo()则绘制一端同时与上面两条线段相切,且半径为radius的圆弧。

2.图形绘制 圆形 绘制圆形同样需要在Canvas上启用路径,通过路径绘制图形。 2.5圆形 圆形 绘制圆形同样需要在Canvas上启用路径,通过路径绘制图形。 CanvasRenderingContext2D绘制圆形的方法如下: arc(float x, float y, float radius, float startAngel, float endAngel, boolen antclockwise):用于向当前路径添加一段圆弧。 圆心坐标为(x,y),半径为radius,开始角度为startAngel,结束角度为endAngel。startAngel、endAngel以为单位,counterclockwise是否为逆时针方向。

2.图形绘制 2.6曲线 曲线 CanvasRrenderingContext2D提供了bezierCurveTo()和quadraticCurveTo()两个方法,可以向Canvas的当前路径上添加复杂的曲线。 两种方法的区别与联系如下: bezierCurveTo()和quadraticCurveTo()都是贝塞尔曲线,bezierCurveTo()是一种三次贝塞尔曲线,quadraticCurveTo()是一种二次贝塞尔曲线。

2.图形绘制 2.6曲线 两种方法的功能和属性用法如下: bezierCurveTo(float cpX1, float cpY1, float cpX2, float cpY2, float x, float y):向Canvas的当前路径添加一段贝塞尔曲线。贝塞尔曲线起点为当前点,终点为(x,y),第一个控制点坐标为(cpX1,cpY1),第二个控制点坐标为(cpX3,cpY2)。 quadraticCurveTo(float cpX, float cpY, float x, float y):向Canvas当前路径添加一段二次曲线。

2.图形绘制 文字 Canvas不仅能绘制图形,还能够显示文本。 2.7文字 文字 Canvas不仅能绘制图形,还能够显示文本。 Canvas中的文本是以图像形式绘制的,一旦文字绘制之后,就无法编辑,除非先擦除文字,再重新绘制。 CanvasRenderingContext2D提供的绘制文字的方法功能用法如下: void fillText(string text, float x, float y[, float maxWidth]):用于填充字符串。 void strokeText(string text, float x, float y[, float maxWidth])):用于绘制字符串边框。

现场演示: 案例18-08:绘制文字 案例18-09:文字textAlign属性 案例18-10:文字textBaseAlign属性

2.图形绘制 绘制图像 绘制图像时,需使用drawImage方法,CanvasRenderingContext2D为绘位图提供了三种用法: 2.8图像 绘制图像 绘制图像时,需使用drawImage方法,CanvasRenderingContext2D为绘位图提供了三种用法: void drawImage(image image, float x, float y):直接绘制,用于把image绘制到(x,y)处,不会对图片做任何缩放处理,绘制出来的图片保持原来的大小。 void drawImage(image image, float x, float y, float width, float height):绘制并指定大小,该方法按照指定大小(width、height)把image绘制到(x,y)处。 void drawImage(image image, integer sx, integer sy, integer sw, integer sh, float dx, float dy, float dw, float dh):从画布中已经画好的图像上复制全部或局部到画布的另一位置。

2.图形绘制 图像平铺 图像平铺就是用图像将画布填满,是绘制图像的一个重要功能。 实现平铺技术有两种方法: 2.8图像 图像平铺 图像平铺就是用图像将画布填满,是绘制图像的一个重要功能。 实现平铺技术有两种方法: 一种是使用前面所介绍的drawImage()方法。 另一种实现平铺效果方法是CanvasRenderingContext2D的createPattern方法。

现场演示: 案例18-12:drawImage平铺 案例18-13:createPatternTile平铺

2.图形绘制 图像裁剪 使用Canvas绘制图像时,经常只需要保留图像的一部分,使用Canvas API自带的图像裁剪功能可以实现这一功能。 2.8图像 图像裁剪 使用Canvas绘制图像时,经常只需要保留图像的一部分,使用Canvas API自带的图像裁剪功能可以实现这一功能。 使用CanvasRenderingContext2D的clip方法实现Canvas元素的图像裁剪功能,具体步骤如下: 将需要从图像上裁剪的区域定义成Canvas上的路径。 调用ConvasRenderingContext2D的clip()方法把路径裁剪下来。 绘制图像,只有被clip()方法裁剪的路径覆盖的部分才会被显示出来。

2.图形绘制 像素处理 Canvas API能获取图像中的每一个像素,得到该像素的RGBA值。 2.8图像 像素处理 Canvas API能获取图像中的每一个像素,得到该像素的RGBA值。 使用图形上下文对象的getImageData方法来获取图像中的像素,该方法的定义如下: var imageData = context.getImageData(sx, sy. sw, sh):sx,sy分别表示获取区域的起点横坐标、起点纵坐标,sw、sh分别表示所获取区域宽度和高度。 context.putImageData(imagedata, dx, dy[, dirtyX, dirty, dirtyWidth, dirtyHeight]):imageData为前面所述的像素数组,dx、dy分别表示重绘图像的起点横坐标、起点纵坐标。

2.图形绘制 2.8图像 位图输出 当程序CanvasRenderingContext2D通过CanvasRenderingContext2D在Canvas上绘图完成后,通常会需要将该图形或图像输出保存到文件中,可以调用Canvas提供的toDataURL()方法输出位图。 toDataURL方法的用法如下: toDataURL(string type):该方法把Canvas对应的位图编码成DataURL格式的字符串。其中参数type是一个形如image/png格式的MIME字符串。

3.图形变换与控制 3.1坐标变换 坐标变换 CanvasRenderingContext2D提供坐标变换支持,通过使用坐标变换,Web前端开发者无须繁琐地计算每个点的坐标,只需对坐标系统进行整体变换即可。 CanvasRenderingContext2D支持的坐标变换有平移、缩放和旋转三种操作,对应的方法分别为translate(),scale()和rotate(): translate(float dx, foat dy):用作平移坐标系统。 scale(float sx, float sy):缩放坐标系统。 rotate(float angle):旋转坐标系统。

3.图形变换与控制 CanvasRenderingContext2D提供两种方法来保存、恢复绘图状态: save():保存当前的绘图状态。 3.1坐标变换 CanvasRenderingContext2D提供两种方法来保存、恢复绘图状态: save():保存当前的绘图状态。 restore():恢复之前保存的绘图状态。

现场演示: 案例18-17:平移 案例18-18:缩放 案例18-19:旋转 案例18-20:坐标变换综合使用

3.图形变换与控制 3.2矩阵变换 矩阵变换 矩阵变换是CanvasRenderingContext2D提供的一个更通用的坐标变换方法transform()。 矩阵变换方法的具体使用方法如下: transform(m11, m12, m21, m22, dx, dy):这是一个基于矩阵的变换方法。其中前4个参数组成变换矩阵;dx, dy负责对坐标系统进行平移。

3.图形变换与控制 设置阴影 阴影是图形展示中不可或缺的效果,经常在Web和图形设计中使用。 3.3设置阴影 设置阴影 阴影是图形展示中不可或缺的效果,经常在Web和图形设计中使用。 在画布中创建阴影效果是相对较简单的,它可以通过4个全局属性进行控制,具体如下: shadowBlur:设置阴影的模糊度。 shadowColor:设置阴影的颜色。 shadowOffsetX:设置阴影X方向的偏移。 shadowOffsetY:设置阴影Y方向的偏移。

3.图形变换与控制 叠加风格 CanvasRebderingContext2D绘图时,后面绘制的图形会默认完全覆盖在前面绘制的图形。 3.4叠加风格 叠加风格 CanvasRebderingContext2D绘图时,后面绘制的图形会默认完全覆盖在前面绘制的图形。 特殊情况下需要其他叠加风格,可修改CanvasRebderingContext2D的globalCompositeOperation属性来实现。

3.图形变换与控制 3.4叠加风格 globalCompositeOperation各属性如表所示:

3.图形变换与控制 线性渐变 线性渐变方法的具体使用方法如下所示: 3.5填充风格 线性渐变 线性渐变方法的具体使用方法如下所示: createLinearGradient(float xStart, float yStart, float xEnd, float yEnd):四个参数分别表示渐变开始横坐标、渐变开始纵坐标、渐变结束横坐标、渐变结束纵坐标。

3.图形变换与控制 线性渐变 线性渐变使用步骤如下所示: 3.5填充风格 线性渐变 线性渐变使用步骤如下所示: 调用CanvasRenderingContext2D的createLinearGradient(float xStart, float yStart, float xEnd, float yEnd)方法创建一个线性渐变,该方法返回一个CanvasGradient对象。 调用CanvasGradient对象的addColorStop(float offset, string color)方法向线性渐变中添加颜色。 将CanvasGradient对象赋值给CanvasRenderingContext2D的fillStyle或strokeStyle属性。

3.图形变换与控制 圆形渐变 圆形渐变使用createRadialGradient()方法。 3.5填充风格 圆形渐变 圆形渐变使用createRadialGradient()方法。 createRadialGradient(float xstart, float ystart, float radiusStart, float xEnd, float yEnd, float radiusEnd): xStart、yStart控制渐变开始的圆圈圆心。 radiusStart控制开始圆圈的半径。 xEnd、yEnd控制渐变结束圆圈的圆心。 radiusEnd控制结束圆圈的半径。

3.图形变换与控制 位图填充 Canvas提供了CanvasPattern对象用于实现位图填充,位图填充方式有填充背景和填充边框2种: 3.5填充风格 位图填充 Canvas提供了CanvasPattern对象用于实现位图填充,位图填充方式有填充背景和填充边框2种: 填充背景已经在前面使用createPattern()方法实现图像平铺中应用; CanvasPattern对象既可赋值给strokeStyle属性作为(作为几何形状的边框),也可以赋值给fillStyle树形(作为集合形状的填充)。

现场演示: 案例18-24:线性渐变 案例18-25:圆形渐变 案例18-26:位图填充

4.案例:用Canvas绘制统计报表 本例将综合使用文本、矩形、圆以及渐变、叠加等效果绘制“某网站用户访问来源分布饼状图”。 预期实现效果如下图所示:

现场演示: 案例18-27:某网站用户访问来源

Thanks.