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-23 canvas专题-了解外部框架的使用

学习要点

绘制圆弧

属性

方法

最新文章

热门文章