8-23 canvas专题-了解外部框架的使用

学习要点

掌握画布内容的导出的toDataURL()方法
了解外部框架的使用

第八章内容介绍

在第八章中我们将对以前的知识进行简单的回顾，着重对canvas绘图和简单动画做进一步讲解；
将对音频视频做进一步的讲解；
将介绍其他HTML5的新增功能比如拖放本地存储等。

线条样式

绘制直线，第五章知识简单回顾
lineWidth 设置或返回当前的线条宽度，单位为像素
lineCap 设置或返回线条的结束端点样式
1. butt 默认。向线条的每个末端添加平直的边缘。
2. round 向线条的每个末端添加圆形线帽。
3. square 向线条的每个末端添加正方形线帽。
  "round" 和 "square" 会使线条略微变长。
lineJoin 设置或返回两条线相交时，所创建的拐角类型
1. miter 默认。创建尖角。
2. bevel 创建斜角。
3. round 创建圆角。
miterLimit 设置或返回最大斜接长度。
斜接长度指的是在两条线交汇处内角和外角之间的距离。该属性定义了斜连线长度和线条宽度的最大比率
1. 只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。
2. 边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。
3. 如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示

矩形

rect(x,y,w,h) 创建矩形。
fillRect(x,y,w,h) 绘制"被填充"的矩形。
strokeRect(x,y,w,h) 绘制矩形（无填充）。
clearRect(x,y,w,h) 在给定的矩形内清除指定的像素。

路径方法

fill() 填充当前绘图（路径）
stroke() 绘制已定义的路径
moveTo() 把路径移动到画布中的指定点，不创建线条
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
开启和关闭路径
beginPath() 起始一条路径，或重置当前路径
closePath() 创建从当前点回到起始点的路径
绘制圆弧
arc() 创建弧/曲线（用于创建圆形或部分圆）
arcTo(x1,y1,x2,y2,r) 创建两切线之间的弧/曲线

  1 <!DOCTYPE html>

  2 <html lang="zh-cn">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title>8-4 课堂演示</title>

  6 </head>

  7 <body>

  8     <canvas id="canvas" width="600" height="400" style="background: #A9A9A9">

  9         很抱歉，您的浏览器暂不支持HTML5的canvas

 10     </canvas>

 11     <canvas id="canvas2" width="600" height="900" style="background: #A9A9A9">

 12         很抱歉，您的浏览器暂不支持HTML5的canvas

 13     </canvas>

 14     <script type="text/javascript">

 15         var c=document.getElementById("canvas");

 16         var ctx=c.getContext("2d");

 17         ctx.lineWidth=5

 18         ctx.fillStyle = "orange"

 19         ctx.strokeStyle = "green"

 20

 21         //描边圆

 22         ctx.beginPath();

 23         ctx.arc(100,50,30,0,Math.PI*2);

 24         ctx.stroke();

 25

 26         //填充圆

 27         ctx.beginPath();

 28         ctx.arc(100,150,30,0,Math.PI*2)

 29         ctx.fill()

 30

 31         //同时带有描边和填充的圆

 32         ctx.beginPath();

 33         ctx.arc(100,250,30,0,Math.PI*2)

 34         ctx.fill()

 35         ctx.stroke();

 36

 37         //描边、填充和同时描边和填充的弧

 38         //默认值 false顺时针

 39         ctx.beginPath();

 40         ctx.arc(200,50,30,0,Math.PI*2/3);

 41         ctx.stroke();

 42

 43         ctx.beginPath();

 44         ctx.arc(200,150,30,0,Math.PI*2/3)

 45         ctx.fill()

 46

 47         ctx.beginPath();

 48         ctx.arc(200,250,30,0,Math.PI*2/3)

 49         ctx.fill()

 50         ctx.stroke();

 51

 52

 53         //描边、填充和同时描边和填充的弧

 54         // true 逆时针

 55         ctx.beginPath();

 56         ctx.arc(300,50,30,0,Math.PI*2/3,true);

 57         ctx.stroke();

 58

 59         ctx.beginPath();

 60         ctx.arc(300,150,30,0,Math.PI*2/3,true)

 61         ctx.fill()

 62

 63         ctx.beginPath();

 64         ctx.arc(300,250,30,0,Math.PI*2/3,true)

 65         ctx.fill()

 66         ctx.stroke();

 67

 68         //描边、填充和同时描边和填充的弧

 69         // true 顺时针

 70         //封闭路径

 71         ctx.beginPath();

 72         ctx.arc(400,50,30,0,Math.PI*2/3,true);

 73         ctx.closePath()

 74         ctx.stroke();

 75

 76         ctx.beginPath();

 77         ctx.arc(400,150,30,0,Math.PI*2/3,true)

 78         ctx.closePath()

 79         ctx.fill()

 80

 81         ctx.beginPath();

 82         ctx.arc(400,250,30,0,Math.PI*2/3,true)

 83         ctx.closePath()

 84         ctx.fill()

 85         ctx.stroke();

 86

 87     </script>

 88     <script>

 89         var c=document.getElementById("canvas2");

 90         var ctx=c.getContext("2d");

 91         ctx.lineWidth=2

 92         ctx.fillStyle = "orange"

 93         ctx.strokeStyle = "green"

 94         ctx.beginPath();

 95         ctx.moveTo(200,300);

 96         ctx.arcTo(200,100,400,100,100)

 97         ctx.lineTo(400,100);

 98         ctx.stroke();

 99     </script>

100 </body>

101 </html>

 1 <!DOCTYPE html>

 2 <html lang="zh-cn">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>8-5 课堂演示</title>

 6 </head>

 7 <body>

 8     <canvas id="canvas" width="800" height="400" style="background: #A9A9A9">

 9         很抱歉，您的浏览器暂不支持HTML5的canvas

10     </canvas>

11     <script>

12         var c=document.getElementById("canvas");

13         var ctx=c.getContext("2d");

14         ctx.lineWidth=3

15         ctx.fillStyle = "orange"

16         ctx.strokeStyle = "green"

17         ctx.fillRect(50,50,150,150)

18         ctx.strokeRect(50,50,150,150)

19

20         //圆角矩形

21         ctx.beginPath()

22         ctx.moveTo(300,60)

23         ctx.arcTo(300,50,450,50,10)

24         ctx.arcTo(450,50,450,150,10)

25         ctx.arcTo(450,150,300,150,10)

26         ctx.arcTo(300,150,300,50,10)

27         ctx.closePath()

28         ctx.stroke()

29         ctx.fill()

30

31         //封装绘制圆角矩形的函数

32         function roundRect(x,y,w,h,r){

33             ctx.beginPath()

34             ctx.moveTo(x,y+r)

35             ctx.arcTo(x,y,x+w,y,r)

36             ctx.arcTo(x+w,y,x+w,y+h,r)

37             ctx.arcTo(x+w,y+h,x,y+h,r)

38             ctx.arcTo(x,y+h,x,y,r)

39             ctx.closePath()

40             ctx.stroke()

41         }

42

43         roundRect(300,200,100,150,15)

44         ctx.fill()

45

46         for (var i = 0; i < 10; i++) {

47             roundRect(50*i,5*i,i*30,i*30,5*i)

48         }

49     </script>

50 </body>

51 </html>

quadraticCurveTo(cx,cy,x,y) 创建二次贝塞尔曲线
二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
bezierCurveTo(c1x,c1y,c2x,c2y,x,y) 创建三次方贝塞尔曲线
提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
clip() 从原始画布剪切任意形状和尺寸的区域
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false

颜色、样式和阴影

fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
阴影
1. shadowColor 设置或返回用于阴影的颜色
2. shadowBlur 设置或返回用于阴影的模糊级别
3. shadowOffsetX 设置或返回阴影距形状的水平距离
4. shadowOffsetY 设置或返回阴影距形状的垂直距离
渐变
1. createLinearGradient(x0,y0,x1,y1) 创建线性渐变（用在画布内容上）
2. createRadialGradient(x0,y0,r0,x1,y1,r1) 创建放射状/环形的渐变（用在画布内容上）
3. addColorStop() 规定渐变对象中的颜色和停止位置
createPattern(image,"repeat|repeat-x|repeat-y|no-repeat") 在指定的方向上重复指定的元素
- createPattern() 方法在指定的方向内重复指定的元素。
- 元素可以是图片、视频，或者其他 canvas 元素。
- 被重复的元素可用于绘制/填充矩形、圆形或线条等等
CanvasPattern对象开始平铺图像的参考起点并不是我们当前绘制图形的左上角，而是整个canvas画布的左上角，确切地说，即canvas的起点坐标(0,0)。

注意:如果createPattern()方法的image参数值不是当前页面一个已经存在的Image对象或Canvas对象，那么我们需要等待浏览器将图片加载完毕后才能调用createPattern()方法及后续操作，否则将无法正确显示对应的图形。

文本

属性
- font 设置或返回文本内容的当前字体属性
- textAlign 设置或返回文本内容的当前对齐方式
  - start 默认。文本在指定的位置开始。
  - end 文本在指定的位置结束。
  - center 文本的中心被放置在指定的位置。
  - left 文本左对齐。
  - right 文本右对齐。
- textBaseline 设置或返回在绘制文本时使用的当前文本基线
  - top 文本基线是 em 方框的顶端。
  - bottom 文本基线是 em 方框的底端。
  - middle 文本基线是 em 方框的正中。
  - alphabetic 默认。文本基线是普通的字母基线。
  - ideographic 文本基线是表意基线。一般用于绘制中文或日文字符串。
  - hanging 文本基线是悬挂基线。一般用于绘制印度语字符串
方法
- fillText() 在画布上绘制“被填充的”文本
- strokeText() 在画布上绘制文本（无填充）
- measureText() 返回包含指定文本宽度的对象语法：context.measureText(text).width;

转换

scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()

合成

globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
- source-over 默认。在目标图像上显示源图像。
- source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
- source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
- source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
- destination-over 在源图像上方显示目标图像。
- destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
- destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
- destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
- lighter 显示源图像 + 目标图像。这个值与顺序无关，如果源与目标重叠，就将两者的颜色值想加。得到的颜色值的最大取值为255，结果就为白色。
- copy 显示源图像。忽略目标图像。这个值与顺序无关，只绘制源，覆盖掉目标。
- xor 使用异或操作对源图像与目标图像进行组合。这个值与顺序无关，只绘制出不重叠的源与目标区域。所有重叠的部分都变成透明的

图像绘制

drawImage(img,sx,sy,swidth,sheight,x,y,width,height) 向画布上绘制图像、画布或视频
- - img 规定要使用的图像、画布或视频。
  - sx 可选。开始剪切的 x 坐标位置。
  - sy 可选。开始剪切的 y 坐标位置。
  - swidth 可选。被剪切图像的宽度。
  - sheight 可选。被剪切图像的高度。
  - x 在画布上放置图像的 x 坐标位置。
  - y 在画布上放置图像的 y 坐标位置。
  - width 可选。要使用的图像的宽度。（伸展或缩小图像）
  - height 可选。要使用的图像的高度。（伸展或缩小图像）
- drawImage(image,x,y) : 在canvas中(x,y)处绘制图片。
- drawImage(image,x,y,width,height) : 在canvas中(x,y)处绘制图片，并将其缩放到指定的宽度和高度。
- drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) :
  从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight)，缩放到指定的宽度和高度，并在canvas中(x,y)绘制出来。

像素操作

属性
- width 返回 ImageData 对象的宽度(可以理解为一行像素的个数)
- height 返回 ImageData 对象的高度(可以理解为一列像素的个数)
- data 返回一个对象，其包含指定的 ImageData 对象的图像数据
  - 该对象包含每一个像素的四个rgba值，注意每个值都在0-255之间
  - 这个四个参数和CSS中讲的rgba颜色表示法原理相同，四个参数分别表示红、绿、蓝以及透明度。
  - 所不同的是这里的透明度取值也是0-255,255表示完全不透明，0表示完全透明
方法
- getImageData(x,y,w,h) 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
- putImageData(imgData,dx,dy,dirtyX,dirtyY,w,h) 把图像数据（从指定的 ImageData 对象）放回画布上
  首先讨论第一种最简单的putImageData用法，即putImageData(imgData,dirtyX,dirtyY)，在解释其他参数
  - imgData 规定要放回画布的 ImageData 对象。
  - dx/dy ImageData 对象左上角的 x/y坐标，以像素计。即准备绘制图像的起点坐标.
  - [dirtyX,dirtyY,w,h]为一组可选参数，该参数确定了一个以dx和dy坐标原点的矩形，分别表示矩形的起点和宽高，该矩形把将要绘制的图像限定在矩形区域内.
    
    温馨提示：如果用绘入外部图片的办法测试该属性，在本地测试会出错，这是由于javaScript的同源策略对context.getImageDate的影响，该策略是基于浏览器的安全，禁用会造成安全隐患。可以通过搭建一个本地站点，将文档放到站点的方法测试。对于这一点在本课程中不做过多讲解。
- createImageData() 创建新的、空白的 ImageData 对象
  - var imgData=context.createImageData(width,height);以指定的尺寸（以像素计）创建新的 ImageData 对象
  - var imgData=context.createImageData(imageData)创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）

状态的保存和恢复

save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性
注意：可以多次保存，逐级恢复；最后保存的最先还原！restore总是还原离他最近的save点（已经还原的不能第2次还原到他）。

canvas画布内容导出为图像

toDataURL()这个方法能把画布里的图案转变成base64编码格式的png，然后返回 Data URL数据。
温馨提示：以前多数浏览器不支持canvas中的内容直接右键保存为图片格式。但现在大多数浏览器都是支持的。

面向画布(Canvas)的JavaScript库

EaselJS 是一个封装了 HTML5 画布(Canvas) 元素的 JavaScript 库。
jCanvaScript面向HTML5画布（canvas）的Javascript类库，它提供了许多方法用于简化处理HTML5画布（canvas）元素的内容，只要支持canvas和javascript的浏览器都可以使用它，包括iPhone、iPad和android等平台。
Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下，可以实现程序图像、动画和互动的应用。Processing.js是轻量，易于了解掌握的理想工具，可用于可视化的数据，创建用户界面和开发基于Web的游戏。
FABRIC.JS是一款简单而强大的JavaScript Canvas 库，提供了互动的对象模型，同时还包含 Canvas-to-SVG 解析器。
oCanvas是一个JavaScript框架，用于简化HTML5 Canvas标签的使用，可以利用对象来代替像素。 oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象，并且创建这些对象的动画。
jCanvas 就是一个 jQuery 的绘图插件，它封装了一些绘制图形的方法，只需编写几行代码即可生成图形。
RGraph是一个使用HTML5 Canvas标签实现的图表制作Library。利用该Library生成的Chart具有可交互性，当鼠标点击或移过时会显示相应的信息，可以动态加载Chart或对特殊点进行缩放。
Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合：SVG，Canvas 和 WebGL，旨在使平面形状和动画的创建更方便，更简洁。
......
温馨提示：虽然使用各种框架(库)可以提供工作效率节省时间等诸多好处，但是还是建议将canvas的基础知识夯实掌握熟练然后再去学习使用这些框架，最后祝大家学习愉快，希望都能够创作出属于自己的优秀作品。

8-23 canvas专题的更多相关文章

8-13 canvas专题-阶段练习二（下)
8-13 canvas专题-阶段练习二(下) <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...
8-12 canvas专题-阶段练习一（上）
8-12 canvas专题-阶段练习一(上) <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...
8-2 canvas专题-线条样式
8-2 canvas专题-线条样式学习要点对第五章知识进行简单的回顾和总结进一步讲解canvas绘图相关的知识点第八章内容介绍在第八章中我们将对以前的知识进行简单的回顾,着重对canvas绘 ...
HTML5自学笔记[ 23 ]canvas绘图基础7
变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.
HTML5 Canvas 绘图
首先要注意: <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Ex ...
学习Canvas绘图与动画基础绘制多条路径（四）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
WinPhone学习笔记（二）——页面外观剖析
上一个篇博文说了WinPhone页面内部的东西,现在介绍表面的东西,先来看看一下一个WinPhone页面这个页面分了三部分:顶部这个是状态栏, 中间这个是一个页面的内容部分, 最下面则是应用程序栏 ...
android 5.0 水波纹实现
1. 定义一个普通圆角背景的xml; rounded_corners.xml <?xml version="1.0" encoding="utf-8"?& ...
手势识别官方教程(7)识别缩放手势用ScaleGestureDetector.GestureDetector和ScaleGestureDetector.SimpleOnScaleGestureListener
Use Touch to Perform Scaling As discussed in Detecting Common Gestures, GestureDetector helps you de ...

随机推荐

Nginx出现403 forbidden (13: Permission denied)报错的四种原因
一.由于php-fpm启动用户和nginx工作用户不一致所致 php-fpm启动用户配置位置 nginx工作用户配置位置二.不存在在文件,可能是文件路径有误,可以查看nginx错误日志来判断三.缺 ...
Go：方法
一.基本介绍在某些情况下,我们需要定义方法.比如 Person 结构体,除了有一些字段外(姓名.年龄...),还可以有一些行为动作(吃.唱歌...),这就需要用方法才能实现. Go中的方法是作用在指 ...
PHP读取超大的excel文件数据的方案
场景和痛点说明今天因为一个老同学找我,说自己公司的物流业务都是现在用excel处理,按月因为数据量大,一个excel差不多有百万数据,文件有接近100M,打开和搜索就相当的慢联想到场景:要导入数 ...
buf.fill()
buf.fill(value[, offset[, end]][, encoding]) value {String} | {Buffer} | {Number} offset {Number} 默认 ...
洛谷 2187 小Z的笔记
[题解] DP. 设f[i]表示前i个字母,保留第i个字母,最多可以保留多少个字母:设g[i]为当前字母为i的位置对应的f的最大值. 转移方程就是f[i]=max(f[i], g[j]+1) (j与 ...
三菱PLC FB库函数调用方法 (Gx Work2版本)
本文以 GxWorks2 软件为例 1.新建使用标签项目的工程文件 2.从其它库所在工程项目中导入库 3.选择库文件及FB功能块 4.插入FB功能块调用
STM32F407 GPIO原理个人笔记
datasheet(STM32F407ZGT6.pdf)中,IO structure 为FT,表示容忍5V电压后面的uart1_TX之类,表示端口复用共有A~G7组IO口, 每组16个IO口:0~ ...
sql判断以逗号分隔的字符串中是否包含某个字符串--------MYSQL中利用select查询某字段中包含以逗号分隔的字符串的记录方法
sql判断以逗号分隔的字符串中是否包含某个字符串---------------https://blog.csdn.net/wttykj/article/details/78520933 MYSQL中利 ...
Test for Job 图上的动态规划（DAG）
Test for Job Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 11399 Accepted: 2697 Des ...
【进击后端】Ubuntu 命令行安装nginx
一.安装nginx apt-get install nginx 安装路径为:/etc/nginx/conf.d 二.配置nginx,在conf.d目录下新建test.conf 新建文件的命令是vi t ...

8-23 canvas专题

8-23 canvas专题-了解外部框架的使用

学习要点

绘制圆弧

属性

方法

8-23 canvas专题的更多相关文章

随机推荐

热门专题